Menu
I hope this is not duplicated. I wish the whole row had color changed on tr[child]:hover
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
tr[origin]:hover {
background-color: grey;
}
tr[origin]:hover + tr[child]{
background-color: grey;
}
tr[child]:hover {
background-color: grey;
}
</style>
</head>
<body>
<table border="1px">
<tr origin>
<td rowspan="2">1</td>
<td colspan="2">Question</td>
<td rowspan="2">2/3</td>
<td rowspan="2">View answer</td>
</tr>
<tr child>
<td>Rasp 1</td>
<td>Rasp2</td>
</tr>
<tr origin>
<td rowspan="2">1</td>
<td colspan="2">Question</td>
<td rowspan="2">2/3</td>
<td rowspan="2">View answer</td>
</tr>
<tr child>
<td>Rasp 1</td>
<td>Rasp2</td>
</tr>
</table>
</body>
</html>
891
That is a very interesting question !
You can use tbody for that.
You are allowed to put more than one tbody in a table according to w3 spec.
Table rows may be grouped into a table head, table foot, and one or more table body sections [...]
tbody:hover {
background-color: #CCCCCC;
}<table border="1px">
<tbody>
<tr origin>
<td rowspan="2">1</td>
<td colspan="2">Question</td>
<td rowspan="2">2/3</td>
<td rowspan="2">View answer</td>
</tr>
<tr child>
<td>Rasp 1</td>
<td>Rasp2</td>
</tr>
</tbody>
<tbody>
<tr origin>
<td rowspan="2">1</td>
<td colspan="2">Question</td>
<td rowspan="2">2/3</td>
<td rowspan="2">View answer</td>
</tr>
<tr child>
<td>Rasp 1</td>
<td>Rasp2</td>
</tr>
</tbody>
</table>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
