1. 程式人生 > >[CSS3] Responsive Table -- no more table

[CSS3] Responsive Table -- no more table

head val -- width add tab adding more src

When the screen size is small, we can use "no more table" solution. So instead of render table is row layout, we render it in column layout.

Given the table below:

 <table>
      <thead>
        <tr>
          <th>Team</th>
          <th>1st</th>
          <
th>2nd</th> <th>3rd</th> <th>4th</th> <th>5th</th> <th>6th</th> <th>7th</th> <th>8th</th> <th>9th</th> <th>Final</th>
</tr> </thead> <tbody> <tr> <td data-th="Team">Toronto</td> <td data-th="1st">0</td> <td data-th="2nd">0</td> <td data-th="3rd">0</td> <td data-th
="4th">4</td> <td data-th="5th">0</td> <td data-th="6th">1</td> <td data-th="7th">0</td> <td data-th="8th">0</td> <td data-th="9th">0</td> <td data-th="Final">5</td> </tr> <tr> <td data-th="Team">San Francisco</td> <td data-th="1st">0</td> <td data-th="2nd">0</td> <td data-th="3rd">0</td> <td data-th="4th">4</td> <td data-th="5th">0</td> <td data-th="6th">0</td> <td data-th="7th">0</td> <td data-th="8th">0</td> <td data-th="9th">0</td> <td data-th="Final">4</td> </tr> </tbody>

1. Reset table relatede element to block element:

table, thead, tbody, th, td, tr {
          display: block;
        }

2. Remove the thead:

        thead tr {
          position: absolute;
          top: -9999px;
          left: -9999px;
        }

3. Position layout:

       /*The actually content will be on the right side*/
       td { 
          position: relative;
          padding-left: 50%; 
        }
        
       /*Using data-th to set the value and set position to left*/
        td:before { 
          position: absolute;
          left: 6px;
          content: attr(data-th);
          font-weight: bold;
        }    

Full example:

[CSS3] Responsive Table -- no more table