79547572

Date: 2025-04-01 01:49:59
Score: 0.5
Natty:
Report link

Another way of doing the above is follow this article, in short:

table:has(tr > *:nth-child(1):hover) tr > *:nth-child(1),
table:has(tr > *:nth-child(2):hover) tr > *:nth-child(2),
table:has(tr > *:nth-child(3):hover) tr > *:nth-child(3),
table:has(tr > *:nth-child(4):hover) tr > *:nth-child(4) {
  background: var(--col);
}

/* GENERIC DEMO STYLES */
table {
  --col: #00f4;
  --row: #0002;
  border-collapse: collapse;
}

thead tr {
  background: #0883;
}

table tr > * {
  padding: 1em;
  border: 1px solid;
}

tbody > tr:hover {
  background: var(--row);
}
<table>
  <thead>
    <tr>
      <th>First</th>
      <th>Second</th>
      <th>Third</th>
      <th>Fourth</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1.1</td>
      <td>2.1</td>
      <td>3.1</td>
      <td>4.1</td>
    </tr>
    <tr>
      <td>1.2</td>
      <td>2.2</td>
      <td>3.2</td>
      <td>4.2</td>
    </tr>
    <tr>
      <td>1.3</td>
      <td>2.3</td>
      <td>3.3</td>
      <td>4.3</td>
    </tr>
    <tr>
      <td>1.4</td>
      <td>2.4</td>
      <td>3.4</td>
      <td>4.4</td>
    </tr>
  </tbody>
</table>

Reasons:
  • Blacklisted phrase (1): this article
  • Long answer (-1):
  • Has code block (-0.5):
  • Low reputation (1):
Posted by: antoshka