Responsive Table Css

Test wrapping a table using css

by Eric Pias

HTML

<table id="table_id">
<tr>
  <th>
    <span><label>Col1A</label></span>
  </th>
  <th>
    <span><label>Col1B</label></span>
  </th>
  <th>
    <span><label>Col2</label></span>
  </th>
  <th>
    <span><label>Col3</label></span>
  </th>
</tr>
<tr>
<td>data 1A</td>
<td>data 1B</td>
<td>test 2</td>
<td>test 3</td>
</tr>
</table>

CSS

#table_id  {display: block; }
#table_id  th {
  background: lightblue;
}
#table_id  th:nth-last-child(2)>span>label {
  visibility:hidden;  
}
#table_id  th:nth-last-child(-n+1) {
  display:none;  
}
/*#table_id  td {display: inline-block; }*/
#table_id  td:nth-last-child(-n+2) {
  display:table-row;
  background: salmon;
}
#table_id  td:nth-last-child(-n+2):before {
  display:block;
  content: 'col';
  background: lightblue;
}
td { background: green } /* to show cell sizes */