[CSS3] Responsive table--no more table

When the screens size is small, we can use "no more table" solution. So instead of the render table is the 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>          <TDdata-th= "Team">Toronto</TD>          <TDdata-th= "1st">0</TD>          <TDdata-th= "2nd">0</TD>          <TDdata-th= "3rd">0</TD>          <TDdata-th= "4th">4</TD>          <TDdata-th= "5th">0</TD>          <TDdata-th= "6th">1</TD>          <TDdata-th= "7th">0</TD>          <TDdata-th= "8th">0</TD>          <TDdata-th= "9th">0</TD>          <TDdata-th= "Final">5</TD>        </TR>        <TR>          <TDdata-th= "Team">San Francisco</TD>          <TDdata-th= "1st">0</TD>          <TDdata-th= "2nd">0</TD>          <TDdata-th= "3rd">0</TD>          <TDdata-th= "4th">4</TD>          <TDdata-th= "5th">0</TD>          <TDdata-th= "6th">0</TD>          <TDdata-th= "7th">0</TD>          <TDdata-th= "8th">0</TD>          <TDdata-th= "9th">0</TD>          <TDdata-th= "Final">4</TD>        </TR>      </tbody>

1. Reset table Relatede element to block element:

{          display: block;        }

2. Remove the THEAD:

        {          position: absolute;           top: -9999px;           Left: -9999px;        }

3. Position layout:

       /*The actually content would be in 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