So, i have this table of three rows and three columns. I want that when i mouse over a cell, the entire row and column of that cell gets highlighted. And of course, i want a pure CSS solution. For the rows, it is easy because i can just implement the ":hover" selector over the <tr> tag. However, i can't implement over the ":hover" selector onto <colgroup> or <col> tags. That is becauase, all browsers implement such tag with no height nor width. Even if i try to add a width and height, the browser debugger will immediately show that such values will be reset to zero.
<!DOCTYPE html><html><head> <title></title><style type="text/css"> table { border: 1px solid black; border-collapse: separate; } col:nth-child(2n+1) { width: 40px; background-color: violet; } col:hover { /*Doesn't work*/ background-color: aqua; } td { border: 1px solid black; text-align: center; width: 20px; height: 20px; } td:hover { background-color :red; /*Doesn't work*/ top: 0px; left: auto; height: 300%; /*position: fixed; /*breaks it completely*/ } tr { border: 1px solid black; } tr:hover { background-color: yellow; }</style></head><body><table> <colgroup> <col /> <col /> <col /> <col /> <col /> <col /> <col /> </colgroup> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr></table></body></html>
