Vanilla Breeze

Table Responsive Examples

Responsive table layouts that adapt to narrow viewports using container queries and card-based layouts.

Responsive Card Layout

When the table container is narrower than 500px, each row transforms into a card with labeled fields. Uses data-responsive="card" on the table and data-label on each cell.

Resize your browser window to see the table transform into cards at narrow widths.
Name Email Role Status
Alice Chen [email protected] Senior Engineer Active
Bob Martinez [email protected] Marketing Lead Active
Carol Johnson [email protected] Sales Manager On Leave
David Kim [email protected] Developer Active
Emma Wilson [email protected] UX Designer Active

Card Layout Preview

This container is constrained to 400px width to demonstrate the card layout without resizing.

Container width: 400px

Product Price Stock
Wireless Keyboard $79.99 42 units
USB-C Hub $49.99 128 units
Monitor Stand $119.99 15 units
Webcam HD $89.99 67 units

How It Works

HTML Structure

Add data-responsive="card" to the table and data-label to each <td>:

<data-table>
  <table data-responsive="card">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="Name">Alice Chen</td>
        <td data-label="Email">[email protected]</td>
      </tr>
    </tbody>
  </table>
</data-table>

Container Query Behavior

The data-table element uses container-type: inline-size to enable container queries. When the container is narrower than 500px:

Benefits

Progressive Enhancement
Tables remain fully functional without JavaScript. The responsive behavior is pure CSS.
Container-Based
Responds to the container width, not viewport. Works in sidebars, modals, and constrained layouts.
Accessible
Screen readers still receive the full table semantics. Labels provide context for each value.
↑