Responsive Stacking Table
These tables will stack on mobile. Good for tables with higher number of columns and longer text in each cell.
Responsive Stacking Table
Heading |
Another Heading |
Heading Here |
Fourth |
Lorem ipsum dolor sit amet, consectetur adipiscing elit |
Lorem ipsum dolor sit amet, consectetur adipiscing elit |
Lorem ipsum dolor sit amet, consectetur adipiscing elit |
Lorem ipsum dolor sit amet, consectetur adipiscing elit |
Lorem ipsum dolor sit amet, consectetur adipiscing elit |
Lorem ipsum dolor sit amet, consectetur adipiscing elit |
Lorem ipsum dolor sit amet, consectetur adipiscing elit |
Lorem ipsum dolor sit amet, consectetur adipiscing elit |
Lorem ipsum dolor sit amet, consectetur adipiscing elit |
Lorem ipsum dolor sit amet, consectetur adipiscing elit |
Lorem ipsum dolor sit amet, consectetur adipiscing elit |
Lorem ipsum dolor sit amet, consectetur adipiscing elit |
<h3>Responsive Stacking Table</h3>
<table class="table_data_stack display" role="presentation">
<thead>
<tr>
<th>Heading</th>
<th>Another Heading</th>
<th>Heading Here</th>
<th>Fourth</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td data-label="Another Heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td data-label="Heading Here">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td data-label="Fourth Heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
</tr>
<tr>
<td data-label="Heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td data-label="Another Heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td data-label="Heading Here">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td data-label="Fourth Heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
</tr>
<tr>
<td data-label="Heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td data-label="Another Heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td data-label="Heading Here">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td data-label="Fourth Heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
</tr>
</tbody>
</table>