CSS: Table - Row with colspan - change whole row color on hover

user_8555937 0
Viewed 774

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>

css html
2 Answers

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>

user_32875250

Wrap each row's td elements in tbody and target it in css:

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <style type="text/css">

  tbody[row]:hover {
   background-color: grey;
  }

 </style>
</head>
<body>
 <table border="1px">
      <tbody row>
  <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 row>
  <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>
</body>
</html>

user_112280270
Related