Stacked / Card Layout Tables

Technical Deep Dive & Specifications

The Pure CSS Stacked-Card Transformation Algorithm

To transform a table into vertical cards below a specific viewport breakpoint (e.g., @media (max-width: 768px)), we systematically change the layout display properties of all structural table tags:

+-------------------------------------------------------------------------------+
| DOM Node   | Desktop Default Display          | Mobile Transformation Display |
+-------------------------------------------------------------------------------+
| <table>    | display: table                   | display: block                |
| <thead>    | display: table-header-group      | display: none (or sr-only)    |
| <tbody>    | display: table-row-group         | display: block                |
| <tr>       | display: table-row               | display: block (Card Box)     |
| <td>       | display: table-cell              | display: flex / block (Row)   |
+-------------------------------------------------------------------------------+

The attr(data-label) Pseudo-Element Pattern

Because <thead> is hidden on mobile screens, data cells lose their visual column context. To fix this, we attach custom HTML5 data attributes (data-label="...") to each <td>, and retrieve them via CSS using the attr() function inside a ::before pseudo-element:

<!-- HTML -->
<td data-label="Blood Pressure">120/80 mmHg</td>

/* CSS */
@media (max-width: 768px) {
  td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
  }

  td::before {
    content: attr(data-label);
    font-weight: 700;
    color: #475569;
    text-align: left;
    margin-right: 12px;
  }
}

Rendered Mobile Cell Box:
+------------------------------------------------------------------+
| [::before pseudo-element]             | [Native Text Node]       |
| "Blood Pressure"                      | "120/80 mmHg"            |
| (content: attr(data-label))           |                          |
+------------------------------------------------------------------+

The Accessibility Tree Stripping Hazard & Fix

Historically, browser layout engines (notably Safari WebKit and Google Chrome Blink) tied accessibility tree roles directly to CSS display modes. When you set display: block or display: flex on a <table>, <tr>, or <td>, the engine would strip role="table" and role="cell", degrading the table into generic <div> blocks. Screen readers would announce "list of text" instead of "Table: 5 columns, 3 rows".

To safeguard accessibility across all browsers, we attach explicit ARIA tabular roles whenever non-table CSS display transformations are applied:

<!-- Robust Accessible Markup with Fallback ARIA Roles -->
<table role="table">
  <thead role="rowgroup">
    <tr role="row">
      <th role="columnheader">Metric</th>
      <th role="columnheader">Value</th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row">
      <td role="cell" data-label="Metric">Latency</td>
      <td role="cell" data-label="Value">14ms</td>
    </tr>
  </tbody>
</table>

Visually Hiding <thead> Without Breaking Screen Readers

Never use display: none on <thead> if you rely on standard table navigation for screen reader users on desktop. Instead, use an accessible screen-reader-only utility class:

@media (max-width: 768px) {
  .responsive-card-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
  }
}

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Lines 55–60: Below $768\text{px}$, table, tbody, tr, and td are assigned display: block, stripping the native rigid column alignment and allowing each element to stack vertically.
• Lines 63–73: The thead element is not removed with display: none (which could affect certain screen reader modes), but is visually clipped to $1\text{px} \times 1\text{px}$ off-screen using clip-path: inset(50%).
• Lines 76–83: Each <tr> receives margin-bottom: 16px; border-radius: 8px; box-shadow: ...; converting the row into a clean, modern card container.
• Lines 85–92: Each <td> is styled as display: flex; justify-content: space-between; align-items: center;. This creates a two-column key/value row within the card.
• Lines 100–109: td::before reads attr(data-label) from the HTML attribute and prints the uppercase label on the left side of the card line.
• Lines 120–152: Every <td> tag is explicitly annotated with data-label="..." and ARIA roles (role="table", role="rowgroup", role="row", role="cell") to maintain structural semantics.

Expected Browser Render Output

• Desktop Screens ($> 768\text{px}$): A standard dark-header enterprise data table.
• Mobile Screens ($\le 768\text{px}$): The table collapses into 3 floating white cards. Each card displays 5 key-value lines with grey uppercase labels on the left and bold values/status badges aligned to the right.