I implemented a modified version of ThinkingStiff's solution to a question related to columns, colgroups, and CSS :hover psuedoclass. The result is a table that clearly outlines columns and highlights rows when hovered over. (Note: Vertical column headers are purposely left unoutlined).
Take a look at the code snippet below:
table {
overflow: hidden;
}
caption {
background-color: #fff;
padding: 0px
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
width: 100%
}
th, td {
width: 100px;
height: 50px;
position: relative;
}
tr:hover {
background-color: #FBFEFD;
}
td:hover::after {
content: "";
position: absolute;
outline: solid black 2px !important;
left: 0;
top: -5000px;
height: 10000px;
width: 100%;
z-index: -1;
}<table class="ComparisonTable">
<caption>Comparison Table</caption>
<tbody>
// table rows with respective data cells
</tbody>
</table>Can someone explain why the column outline disappears for the selected row? I thought using the !important tag would retain the outline, but it seems not to be the case. Are there any other solutions to keep that outline intact?
As an additional query, why am I experiencing the loss of the rightmost border in the table (although this is less concerning)?
Many thanks in advance for your help!