Chapter 20: Responsive Tables

Flip Scroll Pattern

Transposing 2D table axes via CSS: converting horizontal rows into vertical column cards with pinned attribute headers for multi-product comparison matrices.

LEARNING OBJECTIVES ⌵

Understand the architectural theory and user experience of the Flip Scroll Pattern.
Transpose standard horizontal table rows into vertical column cards on mobile viewports using CSS Flexbox / Grid.
Pin the attribute header column to the left while providing smooth horizontal swipe scrolling across data columns.
Evaluate accessibility considerations, keyboard focus traversal, and visual reading order during axis transposition.

🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation

🌐

1. Input

Directives & Tags

⚙️

2. Parse

Tokenizer & AST

🌳

3. Layout

Box Model & Flow

🎨

4. Render

GPU Paint & Composite

PHASE 1: INPUT & DIRECTIVES

Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Mental Model & Story (Intuitive Foundation)

Imagine shopping for a new smartphone in an electronics store. On the back of the product shelf, there is a wide comparison chart showing 3 different models across 6 features (Screen Size, Battery Life, RAM, Camera Megapixels, Water Resistance, Price).

Desktop Orientation (Horizontal Matrix):
+--------------------+-------------------+-------------------+-------------------+
| Feature Attribute  | Phone Alpha       | Phone Beta        | Phone Gamma       |
+--------------------+-------------------+-------------------+-------------------+
| Screen Size        | 6.1" OLED         | 6.7" OLED 120Hz   | 6.8" AMOLED       |
| Battery Capacity   | 3,800 mAh         | 4,500 mAh         | 5,000 mAh         |
| Primary Camera     | 48 MP Dual        | 50 MP Triple      | 200 MP Quad       |
| Price (USD)        | $799              | $999              | $1,199            |
+--------------------+-------------------+-------------------+-------------------+

Mobile Flip Scroll Transformation (Pinned Feature Sidebar + Horizontal Product Carousel):
[ Fixed Feature Headers ] | ===> Horizontal Swipeable Product Cards ===>
+-----------------------+ | +-----------------+ +-----------------+ +-----------------+
| Screen Size           | | | 6.1" OLED       | | 6.7" OLED 120Hz | | 6.8" AMOLED       |
| Battery Capacity      | | | 3,800 mAh       | | 4,500 mAh       | | 5,000 mAh       |
| Primary Camera        | | | 48 MP Dual      | | 50 MP Triple    | | 200 MP Quad       |
| Price (USD)           | | | $799            | | $999            | | $1,199            |
+-----------------------+ | +-----------------+ +-----------------+ +-----------------+
  (Pinned Left Edge)            (Model 1)           (Model 2)           (Model 3)

On a mobile screen, squishing 4 columns into 375px results in unreadable 8px text. Transforming it into stacked cards (Lesson 20.3) destroys side-by-side comparison because you have to scroll up and down repeatedly to compare Phone Alpha against Phone Gamma.

The Flip Scroll Pattern solves this by transposing the layout:

The Feature Names (<th>) are locked into a vertical column on the left.
The Product Entries (<td>) are transposed into vertical columns that slide horizontally on the right.
Users can swipe left and right across products while keeping the feature labels in view.

Technical Deep Dive & Specifications

The CSS Transposition Mechanics

HTML tables organize data row by row (<tr><td>A</td><td>B</td></tr>). Transposing the visual layout requires splitting the table into two side-by-side flex blocks:

Left Block (Fixed Headers): Contains the <th> elements arranged vertically.
Right Block (Scrollable Data): Contains the <tbody> records transposed so that each row acts as a vertical column card inside a horizontal scrolling track.

CSS Display Mapping for Flip Scroll:
.flip-table           -> display: flex; overflow: hidden;
.flip-table thead     -> display: flex; flex-shrink: 0; (Pinned left column)
.flip-table thead tr  -> display: flex; flex-direction: column;
.flip-table thead th  -> height: 50px; (Explicit height matching data cells)

.flip-table tbody     -> display: flex; overflow-x: auto; (Horizontal scroll track)
.flip-table tbody tr  -> display: flex; flex-direction: column; flex-shrink: 0;
.flip-table tbody td  -> height: 50px; (Explicit height matching header cells)

The Strict Height-Locking Requirement

In standard HTML tables, the browser automatically equalizes row heights across columns. Once you apply display: flex or display: block to table elements, that native height synchronization is severed.

Crucial Rule: To ensure that "Battery Life" in the pinned header aligns with "4,500 mAh" in the scrolled product card, every cell in every row must share an identical explicit height (e.g., height: 52px; line-height: 52px; or min-height: 52px with flex centering).

Height Desynchronization Danger:
Pinned Left Header:         Scrolled Product Card:
+------------------------+  +------------------------+
| Feature (50px)         |  | Phone Alpha (50px)     |
+------------------------+  +------------------------+
| Long Description with  |  | 128 GB (50px)          | <- MISALIGNMENT!
| 2 lines of text (70px) |  +------------------------+    "128 GB" aligns with "Long Desc"
+------------------------+  | Red (50px)             |    instead of "Color"!
| Color (50px)           |  +------------------------+
+------------------------+

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Lines 59–66: .flip-table thead switches to display: flex; flex-shrink: 0; min-width: 130px; and anchors to the left edge with a subtle box-shadow.
Lines 74–80: .flip-table tbody is configured as display: flex; overflow-x: auto;. Each <tr> inside tbody acts as an independent vertical product column card with min-width: 150px; flex-shrink: 0;.
Lines 89–98: Critical height synchronization: .flip-table th, .flip-table td are given an explicit height: 56px; display: flex; align-items: center; to ensure headers and data values stay aligned across horizontal swipes.

Expected Browser Render Output

Desktop: A standard 6-column horizontal cloud pricing matrix.
Mobile Viewports: The header titles (Plan Model, vCPU Cores, etc.) remain pinned on the left, while each instance tier (t4g.nano, c6g.xlarge, etc.) scrolls horizontally as a self-contained vertical card.

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL playground.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flip Scroll Responsive Comparison Matrix</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding: 24px;
      background: #0f172a;
      color: #f8fafc;
    }

.container {
      max-width: 900px;
      margin: 0 auto;
    }

h2 {
      margin-bottom: 20px;
      color: #38bdf8;
    }

/* Base Desktop Table */
    .flip-table {
      width: 100%;
      border-collapse: collapse;
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 8px;
      overflow: hidden;
    }

.flip-table th, 
    .flip-table td {
      padding: 14px 18px;
      text-align: left;
      border-bottom: 1px solid #334155;
      border-right: 1px solid #334155;
    }

.flip-table th {
      background: #0f172a;
      color: #94a3b8;
      font-weight: 600;
      font-size: 0.8125rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

/* Mobile Flip-Scroll Transposition (< 768px) */
    @media (max-width: 768px) {
      .flip-table-wrapper {
        border: 1px solid #334155;
        border-radius: 8px;
        overflow: hidden;
        background: #1e293b;
      }

.flip-table {
        display: flex;
        width: 100%;
        border: none;
      }

/* 1. Left Pinned Header Column */
      .flip-table thead {
        display: flex;
        flex-shrink: 0;
        min-width: 130px;
        background: #0f172a;
        box-shadow: 2px 0 6px rgba(0,0,0,0.3);
        z-index: 2;
      }

.flip-table thead tr {
        display: flex;
        flex-direction: column;
        width: 100%;
      }

/* 2. Right Horizontal Scrolling Track */
      .flip-table tbody {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
      }

.flip-table tbody tr {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        min-width: 150px;
        border-right: 1px solid #334155;
      }

/* 3. Strict Height Equalization Across All Cells */
      .flip-table th,
      .flip-table td {
        display: flex;
        align-items: center;
        height: 56px; /* Strict fixed height */
        padding: 8px 14px;
        border-bottom: 1px solid #334155;
        border-right: none;
        white-space: nowrap;
        font-size: 0.8125rem;
      }

.flip-table thead th {
        font-weight: 700;
        color: #38bdf8;
      }

.flip-table tbody tr:last-child {
        border-right: none;
      }
    }
  </style>
</head>
<body>

<div class="container">
    <h2>Cloud Compute Instance Comparison</h2>

<div class="flip-table-wrapper" tabindex="0" role="region" aria-label="Instance Comparison Table">
      <table class="flip-table">
        <thead>
          <tr>
            <th scope="col">Plan Model</th>
            <th scope="col">vCPU Cores</th>
            <th scope="col">Memory</th>
            <th scope="col">Storage</th>
            <th scope="col">Bandwidth</th>
            <th scope="col">Hourly Rate</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><strong>t4g.nano</strong></td>
            <td>2 vCPU</td>
            <td>0.5 GB</td>
            <td>EBS-Only</td>
            <td>5 Gbps</td>
            <td><strong>$0.0042</strong></td>
          </tr>
          <tr>
            <td><strong>c6g.xlarge</strong></td>
            <td>4 vCPU</td>
            <td>8.0 GB</td>
            <td>1x 100GB NVMe</td>
            <td>12.5 Gbps</td>
            <td><strong>$0.1360</strong></td>
          </tr>
          <tr>
            <td><strong>m6g.4xlarge</strong></td>
            <td>16 vCPU</td>
            <td>64.0 GB</td>
            <td>2x 300GB NVMe</td>
            <td>25 Gbps</td>
            <td><strong>$0.6120</strong></td>
          </tr>
          <tr>
            <td><strong>r6g.8xlarge</strong></td>
            <td>32 vCPU</td>
            <td>256.0 GB</td>
            <td>4x 600GB NVMe</td>
            <td>50 Gbps</td>
            <td><strong>$1.4500</strong></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

🏋️ Hands-On Exercise

🎯 The Challenge: Build a Mobile Smartphone Comparison Flip-Table

Instructions:

Using the provided comparison table, implement the flip-scroll pattern for viewports under 600px.
Ensure the pinned header column has background: #1e1e24 and min-width: 120px.
Set the cell height to 48px across both <th> and <td> elements to prevent row misalignment.

🏁 Starter Code Sandbox

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

STARTER CODE SANDBOX exercise.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

<style>
  .device-table {
    width: 100%;
    border-collapse: collapse;
    font-family: system-ui, sans-serif;
  }
  .device-table th, .device-table td {
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    text-align: left;
  }
  .device-table th {
    background-color: #f1f5f9;
  }

  @media (max-width: 600px) {
    .scroll-area {
      overflow: hidden;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
    }

    .device-table {
      display: flex;
      border: none;
    }

    /* Pinned Vertical Header */
    .device-table thead {
      display: flex;
      flex-shrink: 0;
      min-width: 110px;
      background-color: #1e293b;
      color: #ffffff;
    }
    .device-table thead tr {
      display: flex;
      flex-direction: column;
      width: 100%;
    }
    .device-table thead th {
      background-color: #1e293b;
      color: #ffffff;
      border-color: #334155;
    }

    /* Horizontal Swiping Data Columns */
    .device-table tbody {
      display: flex;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      width: 100%;
    }
    .device-table tbody tr {
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      min-width: 140px;
    }

    /* Strict Height Equalization */
    .device-table th,
    .device-table td {
      display: flex;
      align-items: center;
      height: 48px;
      padding: 6px 10px;
      box-sizing: border-box;
    }
  }
</style>

<div class="scroll-area" tabindex="0" role="region" aria-label="Smartphone Comparison">
  <table class="device-table">
    <thead>
      <tr>
        <th scope="col">Device</th>
        <th scope="col">Screen</th>
        <th scope="col">Camera</th>
        <th scope="col">Battery</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><strong>Pro 16</strong></td>
        <td>6.7" OLED</td>
        <td>48 MP</td>
        <td>4,422 mAh</td>
      </tr>
      <tr>
        <td><strong>Pixel 9</strong></td>
        <td>6.3" OLED</td>
        <td>50 MP</td>
        <td>4,700 mAh</td>
      </tr>
    </tbody>
  </table>
</div>

Why this works:

Transforming thead tr and tbody tr into vertical flex columns transposes the visual axes without modifying the underlying HTML.
An explicit height: 48px on all <th> and <td> elements guarantees vertical row alignment.

⚠️ Common Pitfalls

Variable height cells: If a product has a 3-line description and adjacent cells only have 1 line, the fixed height will clip text or cause rows to fall out of vertical alignment. Use fixed heights with text-overflow: ellipsis or set a uniform min-height that accommodates the tallest expected content.
Forgetting flex-shrink: 0 on tbody rows: Without flex-shrink: 0, mobile browsers will attempt to compress all product columns into the visible screen width, causing text clipping.

💡 Pro Tips

Best Use Case for Flip Scroll: This pattern is ideal for feature comparison tables (e.g., comparing 3–5 subscription tiers, software plans, or hardware specs) where users need to compare specific attributes across entities.
Scroll Snap Enhancement: Add scroll-snap-type: x mandatory; to tbody and scroll-snap-align: start; to tbody tr so mobile touch swipes snap cleanly to individual product cards.

📌 Key Takeaways

The Flip Scroll pattern transposes horizontal rows into vertical column cards on mobile viewports.
The header column is pinned to the left while data columns scroll horizontally on the right.
All cells across headers and body rows must share a strict fixed height to maintain row alignment.
Adding scroll-snap-type: x mandatory creates a smooth, native-feeling carousel swipe experience on mobile devices.
--

⭐ LEARN: HTML 🌟 ⚔️ QUIZ BATTLE ARENA // ACTIVE

? Question 1 / 3

What is the main user experience advantage of the Flip Scroll pattern over the Stacked Card pattern for product comparison tables?

Topic: HTML Fundamentals

? Question 2 / 3

Why must all `<th>` and `<td>` elements have an explicit, uniform `height` when using the Flip Scroll pattern?

Topic: HTML Fundamentals

? Question 3 / 3

Which CSS property enables native smooth snapping to each product card when swiping horizontally across the data track?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

The CSS Transposition Mechanics

The Strict Height-Locking Requirement

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: Build a Mobile Smartphone Comparison Flip-Table

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

What is the main user experience advantage of the Flip Scroll pattern over the Stacked Card pattern for product comparison tables?

Why must all <th> and <td> elements have an explicit, uniform height when using the Flip Scroll pattern?

Which CSS property enables native smooth snapping to each product card when swiping horizontally across the data track?

Why must all `<th>` and `<td>` elements have an explicit, uniform `height` when using the Flip Scroll pattern?