<div class="table-container">
<table class="responsive-table">
<thead>
<tr>
<th>Order ID</th>
<th>Customer</th>
<th>Status</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Order ID">#12345</td>
<td data-label="Customer">John Doe</td>
<td data-label="Status"><span class="status completed">Completed</span></td>
<td data-label="Amount">$120.00</td>
</tr>
<tr>
<td data-label="Order ID">#12346</td>
<td data-label="Customer">Jane Smith</td>
<td data-label="Status"><span class="status pending">Pending</span></td>
<td data-label="Amount">$85.50</td>
</tr>
</tbody>
</table>
</div>
Back to Snippets
Responsive Table Card View CSS
Make data tables look great on mobile. This CSS technique transforms standard table rows into individual cards on small screens, so your data remains readable without horizontal scrolling.
419