Question

Is it possible to have an inner tbody inside an outer tbody like this:

here is a sample css:

  <style type="text/css">
    .class1 {background-color:#ff0000;}
    .class2 {background-color:#00ff00;}
  </style>

Here is the sample HTML

<table>
  <tbody id="outer" class="class1">
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
    <tbody id="inner" class="class2">
      <tr>
        <td>...</td>
        <td>...</td>
      </tr>
    </tbody> <!-- inner -->
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody> <!-- outer -->
</table>

My purpose is to apply class1 CSS to the outer tbody and class2 to the inner tbody.
But the last TR is consider to be out of the outer tbody as I want it to be inside the outer tbody.

How can i do that?

Answer 1

While this may work in practice, it is not legal HTML.

However, you are allowed to have multiple TBODY elements in a single TABLE element, so you could do this:

<table> 
  <tbody class="show"> 
    <tr> 
      <td>...</td> 
      <td>...</td> 
    </tr> 
  </tbody>
  <tbody class="hide"> 
    <tr> 
      <td>...</td> 
      <td>...</td> 
    </tr> 
  </tbody>
  <tbody class="show"> 
    <tr> 
      <td>...</td> 
      <td>...</td> 
    </tr> 
  </tbody>
</table> 

Alternatively, you may be able to nest tables, although I wouldn’t really recommend that.