Tables
Responsive tables for dense business data. Keep columns scannable, status values concise,
and wrap in .table-responsive to preserve usability on narrow screens.
Source file: styles/base.css
Default Data Table
| Merchant | Amount | Frequency | Status |
|---|---|---|---|
| Netflix | $18.99 | Monthly | Confirmed |
| Figma | $15.00 | Monthly | Pending Cancel |
| Adobe | $239.99 | Annual | Detected |
<div class="table-responsive">
<table>
<thead>
<tr>
<th>Merchant</th>
<th>Amount</th>
<th>Frequency</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Netflix</td>
<td>$18.99</td>
<td>Monthly</td>
<td>Confirmed</td>
</tr>
</tbody>
</table>
</div>Guidelines
- Use short headers and keep high-value columns leftmost.
- Avoid more than 6-7 visible columns on desktop without horizontal segmentation.
- Represent status with concise text and consistent vocabulary.