0

I have a CSS grid:

.grid {
    display: grid;
    grid-template-columns: 10em 10em;
    grid-template-columns: 10em 10em;
    overflow: auto;
    width: 19em;
    height: 8em;
}
.grid-cell {
   border: solid 1px;
   height: 3em;
}
<div class="grid">
  <div class="grid-cell" data-row-index="0">A1</div>
  <div class="grid-cell" data-row-index="0">A2</div>

  <div class="grid-cell" data-row-index="1">B1</div>
  <div class="grid-cell" data-row-index="1">B2</div>

  <div class="grid-cell" data-row-index="2">C1</div>
  <div class="grid-cell" data-row-index="2">C2</div>
</div>

Is it possible to highlight all cells of a hovered row without dynamically modifying the cell element's attributes?

Liero
  • 25,216
  • 29
  • 151
  • 297
  • 1
    related: https://stackoverflow.com/a/48109479/8620333 – Temani Afif Nov 17 '21 at 10:22
  • @TemaniAfif: interesting trick with pseudoelement, but it breaks horizontal scrolling which I need – Liero Nov 17 '21 at 10:30
  • Does this answer your question? [How to make hover state on row table with CSS grid layout](https://stackoverflow.com/questions/48108879/how-to-make-hover-state-on-row-table-with-css-grid-layout) – Ortund Nov 17 '21 at 10:34
  • Not entirely. The accepted solution does not work with scrollbars. I cant use `.row-wrapper` with `display: contents` because it is not officially supported and breaks some other stuff. – Liero Nov 17 '21 at 12:46
  • Why not use a table instead? – Brett Donald Nov 18 '21 at 00:00

1 Answers1

-2

Here's a solution using a table instead of a grid.

.grid {
  width: 19em;
  height: 8em;
  overflow: auto;
}
table {
  border-collapse: collapse;
  width: 20em;
}
tr:hover {
  background-color: yellow;
}
td {
  border: solid 1px;
  height: 3em;
}
<div class="grid">
  <table>
    <tr>
      <td>A1</td>
      <td>A2</td>
    </tr>
    <tr>
      <td>B1</td>
      <td>B2</td>
    </tr>
    <tr>
      <td>C1</td>
      <td>C2</td>
    </tr>
  </table>
<div>
Brett Donald
  • 6,745
  • 4
  • 23
  • 51