JSFiddle - React, Tailwind, and code Playground

by stitot

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Table hover precedence: cell > row > column > table</title>
  <style>
    :root {
      /* Global fallback hover color (lowest priority) */
      --table-hover-bg: hsl(210 20% 95%);
    }

    table.hover-table {
      border-collapse: collapse;
      font-family: system-ui, sans-serif;
      margin: 2rem;
      min-width: 420px;
    }

    .hover-table th,
    .hover-table td {
      padding: 0.5rem 0.75rem;
      border: 1px solid #ccc;
      text-align: left;
      transition: background-color 0.15s ease;
    }

    .hover-table thead {
      background: hsl(210 20% 90%);
    }

    /* Base: nothing hovered yet */
    .hover-table td,
    .hover-table th {
      background-color: white;
    }

    /* -------------------------
       COLUMN HOVER (via JS .is-col-hover)
       precedence: column > table
       ------------------------- */
    .hover-table td.is-col-hover,
    .hover-table th.is-col-hover {
      background-color: var(--col-hover-bg,
                         var(--table-hover-bg, transparent));
    }

    /* -------------------------
       ROW HOVER
       precedence: row > column > table
       ------------------------- */
    .hover-table tbody tr:hover > td {
      background-color: var(--row-hover-bg,
                         var(--col-hover-bg,
                         var(--table-hover-bg, transparent)));
    }

    /* -------------------------
       CELL HOVER (HIGHEST)
       precedence: cell > row > column > table

       Important: we add tr:hover > td:hover to beat the row selector’s specificity.
       ------------------------- */
    .hover-table tbody tr:hover > td:hover,
    .hover-table tbody td:hover {
      background-color: var(--cell-hover-bg,
                         var(--row-hover-bg,
                         var(--col-hover-bg,
                         var(--table-hover-bg,...