Tengo una grilla CSS:
.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>¿Es posible resaltar todas las celdas de una fila flotante sin modificar dinámicamente los atributos del elemento de la celda?
Aquí hay una solución usando una tabla en lugar de una cuadrícula.
.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>