Source: dist/css/bespoke_all.css, line 228
This component represents a responsive table that transforms each row into a card layout on mobile devices. It provides an optimized display for smaller screens, enhancing readability and usability.
| Fuit | Vegitable | Meat |
|---|---|---|
| Data 1-1 | Data 1-2 | Data 1-3 |
| Data 2-1 | Data 2-2 | Data 2-3 |
<div class="responsive-table">
<table class="table table-striped">
<thead >
<tr class="display_none table-row:md">
<th class="">Fuit</th>
<th class="">Vegitable</th>
<th class="">Meat</th>
</tr>
</thead>
<tbody class="table-body table-row-group:md flex flex_column">
<tr class="table-row:md flex flex_column">
<td class="data-label-show data-label-hide:md table-cell:md block flex_auto" data-label="Fruit">Data 1-1</td>
<td class="data-label-show data-label-hide:md table-cell:md block flex_auto" data-label="Vegitable">Data 1-2</td>
<td class="data-label-show data-label-hide:md table-cell:md block flex_auto" data-label="Meat">Data 1-3</td>
</tr>
<tr class="table-row:md flex flex_column">
<td class="data-label-show data-label-hide:md table-cell:md block flex_auto" data-label="Fruit">Data 2-1</td>
<td class="data-label-show data-label-hide:md table-cell:md block flex_auto" data-label="Vegitable">Data 2-2</td>
<td class="data-label-show data-label-hide:md table-cell:md block flex_auto" data-label="Meat">Data 2-3</td>
</tr>
</tbody>
</table>
<!-- More table rows -->
</div>