I’m having issues with CSS highlighting the correct rows of my table and allowing highlight when I mouse over them.
The rows of serverA and ServerR look like what I intend.
However, where the server name spans more then 1 row, I have issues with the highlight. For Server X, I would want “Acct X2”, and “7 users” (both rows, not just AcctX1) to also have the alternate background.
For serverB, I would expect none of it to have the background.
For serverC, I would also expect all of the cells to be of a different background color.
A visual from Excel as an example.
Second part
Also, when I do the mouse over, it is not highlighting everything..
What I want is when you mouse over any part of ServerA, the entire group (server A, Acct A1,9 users) all gets highlight. And that works currently.
However, if I put the mouse over serverX, ServerB, or serverC, it only changes the color of the server cell, and the first row cell (for serverX, that would be x1, 9 users)
table {
border: thin solid #000000;
min-width: 100px;
width: 70%;
margin: auto;
text-align: left;
padding: 0px;
}
.abc:hover
{
background-color: coral;
}
tr:nth-child(even) {background-color: #a2a2a2;}
}<h2>Test Highlight</h2>
<table>
<tr>
<th>Server</th>
<th>Group</th>
<th>Users</th>
</tr>
<!-- row 1 -->
<tr class='abc'>
<td rowspan="1">ServerA</td>
<td>Acct A1</td><td>9 users</td></tr>
</tr>
<!-- row 2 -->
<tr class='abc'>
<td rowspan="1">ServerR</td>
<td>Acct R1</td><td>9 users</td></tr>
</tr>
<!-- row 3 & 4 -->
<tr class='abc'>
<td rowspan="2">ServerX</td>
<td>Acct X1</td><td>9 users</td></tr>
<td>Acct X2</td><td>7 users</td></tr>
</tr>
<!-- row 5 & 6 -->
<tr class='abc'>
<td rowspan="2">ServerB</td>
<td>Acct B1</td><td>9 users</td></tr>
<td>Acct B2</td><td>17 users</td></tr>
</tr>
<!-- row 7,8, & 9 -->
<tr class='abc'>
<td rowspan="3">ServerC</td>
<td>Acct C1</td><td>27 users</td></tr>
<td>Acct C2</td><td>7 users</td></tr>
<td>Acct C3</td><td>7 users</td></tr>
</tr></td>
</table>
<hr>Am I asking too much of CSS? Do I need to use JavaScript to do the highlight? I can make any changes to the HTML page if needed.
1
The issue is that the HTML is invalid, so it’s generating a separate <tr> for those double rows. In this example here, I edited the first instance of it to show the difference. By adding the structure for the separate row and giving it an associated classname, you can tell it to highlight both rows when hovering the doubled cell as shown here adding the .abc:hover + .abc_second rule
table {
border: thin solid #000000;
min-width: 100px;
width: 70%;
margin: auto;
text-align: left;
padding: 0px;
}
.abc:hover,
.abc:hover + .abc_second
{
background-color: coral;
}
tr:nth-child(even) {background-color: #a2a2a2;}
}<h2>Test Highlight</h2>
<table>
<tr>
<th>Server</th>
<th>Group</th>
<th>Users</th>
</tr>
<!-- row 1 -->
<tr class='abc'>
<td rowspan="1">ServerA</td>
<td>Acct A1</td><td>9 users</td></tr>
</tr>
<!-- row 2 -->
<tr class='abc'>
<td rowspan="1">ServerR</td>
<td>Acct R1</td><td>9 users</td></tr>
</tr>
<!-- row 3 & 4 -->
<tr class='abc'>
<td rowspan="2">ServerX</td>
<td>Acct X1</td><td>9 users</td></tr>
<tr class='abc_second'><td>Acct X2</td><td>7 users</td></tr>
<!-- row 5 & 6 -->
<tr class='abc'>
<td rowspan="2">ServerB</td>
<td>Acct B1</td><td>9 users</td></tr>
<td>Acct B2</td><td>17 users</td></tr>
</tr>
<!-- row 7,8, & 9 -->
<tr class='abc'>
<td rowspan="3">ServerC</td>
<td>Acct C1</td><td>27 users</td></tr>
<td>Acct C2</td><td>7 users</td></tr>
<td>Acct C3</td><td>7 users</td></tr>
</tr></td>
</table>
<hr>1