Um efeito meio boca de cruzeta na tabela

[Frank K Hosaka]

Encontrei no Google um código que muda a cor da linha e da coluna sob a célula em que o mouse parar (efeito "hover").

O código funciona, desde que você não defina a cor do <td>, <th> ou <tr>.

astudy.php
---------------------------------------

<style>
/* fonte: https://css-tricks.com/simple-css-row-column-highlighting/ */
table {overflow: hidden}
tr:hover {background-color: #ffa}
td, th {position: relative;}
td:hover::after,
th:hover::after {content: "";position: absolute;background-color: #ffa;left: 0;top: -5000px;height: 10000px;width: 100%;z-index: -1}
</style>
<table>
<tr><th><th>Col-1</th><th>Col-2</th><th>Col-3</th><th>Col-4</th><th>Col-5</th>
<tr><td>Lin-1</td><td></td><td></td><td></td><td></td><td></td>
<tr><td>Lin-2</td><td></td><td></td><td></td><td></td><td></td>
<tr><td>Lin-3</td><td></td><td></td><td></td><td></td><td></td>
<tr><td>Lin-4</td><td></td><td></td><td></td><td></td><td></td>
<tr><td>Lin-5</td><td></td><td></td><td></td><td></td><td></td>
</table>

 

Editado Julho 20, 2022 por Frank K Hosaka