Hoverable & Focusable Table Rows

Technical Deep Dive & Specifications

The Interaction State Cascade

Modern web applications must handle multiple distinct user interaction states across table rows:

+-------------------------------------------------------------------------------+
|                            ROW STATE PRECEDENCE                               |
+-------------------------------------------------------------------------------+
|  1. BASE / DEFAULT   : Standard row or alternating zebra stripe              |
|         |                                                                     |
|         v                                                                     |
|  2. HOVER            : Pointer enters row boundary (:hover)                   |
|         |                                                                     |
|         v                                                                     |
|  3. KEYBOARD FOCUS   : Focused via TAB or arrow keys (:focus-visible)         |
|         |                                                                     |
|         v                                                                     |
|  4. SELECTED         : Persistent active state ([aria-selected="true"])       |
|         |                                                                     |
|         v                                                                     |
|  5. ACTIVE / PRESS   : Mouse button down or Space/Enter pressed (:active)    |
+-------------------------------------------------------------------------------+

Keyboard Navigability & Semantic Architecture

A standard <tr> element is not natively focusable in HTML. To make a table row interactive, you have two architectural approaches:

Approach A: The Row-Level Focus Architecture (tabindex="0")

Use this when the entire row represents a single actionable item (e.g. clicking/pressing Enter on any part of the row opens a detailed view modal):

<tr tabindex="0" role="row" aria-selected="false">
  <td>INV-101</td>
  <td>Acme Corp</td>
  <td>$1,200.00</td>
</tr>

Approach B: The Cell-Contained Action Architecture

Use this when the table contains multiple discrete controls per row (checkboxes, action buttons, links):

<tr>
  <td><input type="checkbox" aria-label="Select row INV-101"></td>
  <td><a href="/invoices/101">INV-101</a></td>
  <td><button type="button" aria-label="Download PDF">PDF</button></td>
</tr>

When using Approach B, you can highlight the whole row whenever any child inside it receives keyboard focus using the :focus-within pseudo-class:

tbody > tr:focus-within {
  background-color: var(--row-focus-bg);
}

Zero-Layout-Shift Focus Indicators

A notorious bug in junior table design is changing border-width on :hover or :focus (e.g., adding border: 2px solid blue). Because borders contribute to table box dimensions, changing borders dynamically forces the browser engine to perform an expensive Layout / Reflow, causing all neighboring rows and columns to visibly twitch or jump.

Technique 1: outline with Negative Offset

outline does not occupy box-model space and never triggers reflow:

tbody > tr:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: -2px; /* Pulls outline inside cell boundaries */
  z-index: 2;           /* Ensures focus ring paints above neighboring cells */
}

Technique 2: Inset box-shadow

In border-collapse: collapse tables where outline may clip against adjacent shared borders, an inset box-shadow provides a crisp, layout-shift-free focus frame:

tbody > tr:focus-visible td {
  box-shadow: inset 0 2px 0 var(--focus-ring-color),
              inset 0 -2px 0 var(--focus-ring-color);
}
tbody > tr:focus-visible td:first-child {
  box-shadow: inset 2px 2px 0 var(--focus-ring-color),
              inset 0 -2px 0 var(--focus-ring-color);
}
tbody > tr:focus-visible td:last-child {
  box-shadow: inset -2px 2px 0 var(--focus-ring-color),
              inset 0 -2px 0 var(--focus-ring-color);
}

Mobile Touch & Pointer Media Queries

On touchscreens (smartphones, tablets), tapping a row triggers a :hover state that "sticks" indefinitely until the user taps somewhere else. This creates confusing visual artifacts.

To restrict hover effects exclusively to pointing devices (mice, trackpads), wrap your hover styles in the CSS Pointer Interaction Media Query:

@media (hover: hover) and (pointer: fine) {
  /* Only applied on devices with a mouse or precision stylus */
  tbody > tr:hover {
    background-color: var(--row-hover-bg);
    cursor: pointer;
  }
}

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 55–65 (@media (hover: hover)): Wraps :hover definitions inside a pointer query. This guarantees that mobile touch taps don't cause permanently stuck hover highlights.
• Line 68–71 (tr[aria-selected="true"]): Styles the persistent selection state using the official W3C ARIA attribute selector rather than a non-semantic class like .selected.
• Line 74–79 (tr:focus-visible): Applies a 2px royal blue focus ring exclusively when the row receives keyboard focus. outline-offset: -2px pulls the focus boundary inward so it does not spill outside the table bounding box.
• Line 81–83 (tr:focus-within): Ensures that if a user tabs into the internal <button> or <input type="checkbox">, the surrounding row highlights smoothly to give spatial context.

Expected Browser Render Output

+----------------------------------------------------------------------------------------+
| [ ] | Incident ID | Severity | Summary                               | Actions         |
+----------------------------------------------------------------------------------------+
| [ ] | INC-401     | Critical | Primary database replication latency  | [Acknowledge]   | (Default row)
+----------------------------------------------------------------------------------------+
| [X] | INC-402     | Warning  | Disk utilization on worker-04 exceeded| [Acknowledge]   | (Selected: Blue tint)
+----------------------------------------------------------------------------------------+
| [ ] | INC-403     | Info     | Automatic TLS certificate renewal     | [Acknowledge]   | (Hover: Slate tint)
+----------------------------------------------------------------------------------------+
* (Pressing TAB outlines the entire row in a crisp 2px focus ring without shifting layout) *