Responsive table FARA JavaScript

Nu e invenția mea, dar mi se pare soluția cea mai bună.

Sursa: Responsive Table – a Pen by Geoff Yuen

HTML:

<table class="rwd-table">
  <tr>
    <th>Movie Title</th>
    <th>Genre</th>
    <th>Year</th>
    <th>Gross</th>
  </tr>
  <tr>
    <td data-th="Movie Title">Star Wars</td>
    <td data-th="Genre">Adventure, Sci-fi</td>
    <td data-th="Year">1977</td>
    <td data-th="Gross">$460,935,665</td>
  </tr>
  <tr>
    <td data-th="Movie Title">Howard The Duck</td>
    <td data-th="Genre">"Comedy"</td>
    <td data-th="Year">1986</td>
    <td data-th="Gross">$16,295,774</td>
  </tr>
  <tr>
    <td data-th="Movie Title">American Graffiti</td>
    <td data-th="Genre">Comedy, Drama</td>
    <td data-th="Year">1973</td>
    <td data-th="Gross">$115,000,000</td>
  </tr>
</table>

CSS (SCSS):

             
// using mobile first method (IE8,7 requires respond.js polyfill https://github.com/scottjehl/Respond)

$breakpoint-alpha: 480px; // adjust to your needs

.rwd-table {
  margin: 1em 0;
  min-width: 300px; // adjust to your needs
  
  tr {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }
  
  th {
    display: none; // for accessibility, use a visually hidden method here instead! 
  }
  
  td {
    display: block; 
    
  &:first-child {
    padding-top: .5em;
  }

  &:last-child {
    padding-bottom: .5em;
  }

  &:before {
    content: attr(data-th)": "; // who knew you could do this? The internet, that's who.
    font-weight: bold;

  // optional stuff to make it look nicer
  width: 6.5em; // magic number :( adjust according to your own content
  display: inline-block;
  // end options
      
  @media (min-width: $breakpoint-alpha) {
     display: none;
  }
 }
}
  
th, td {
  text-align: left;
    
@media (min-width: $breakpoint-alpha) {
  display: table-cell;
  padding: .25em .5em;
      
  &:first-child {
    padding-left: 0;
 }
      
 &:last-child {
   padding-right: 0;
 }
}

}
}

 

Responsive table FARA JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *