Can a tbody be inside another one?

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?

score 46 · Accepted Answer · answered Oct 17 '10 at 12:16

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.

But I have the example and it's work https://codepen.io/andornagy/pen/gaGBZz. Maybe you can help me, and change this structure of html to correct, but it's should work as it worked before. I'll so appreciate you. — Pavlo Chechehov, Nov 23 '18 at 10:24

score 19 · Answer 2 · edited Jun 27 '17 at 15:14

19

The way would be to create another table and use tbody afterwards:

<table>
  <tbody id="outer" class="show">
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td colspan="2">
         <table>
        <tbody id="inner" class="hide">
         <tr>
           <td>...</td>
           <td>...</td>
         </tr>
       </tbody> <!-- inner -->
         </table>
      </td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody> <!-- outer -->
</table>

edited Jun 27 '17 at 15:14

SharpC

6,974
4
45
40

answered Oct 17 '10 at 12:15

Sarfraz

377,238
77
533
578

Thanks a lot, but ihave preference for Michael Madsen's answer. – Oct 17 '10 at 12:26
this was the correct answer to the original question, because it allows tbody elements within tbody elements which was what was asked for. This allows to select by parent tbody id and child tbody class if need be. – amaster Jul 05 '13 at 19:39
7

This answer may be formally correct, but it's meaningless. The tbodies will belong to different tables, so their columns won't be aligned with each other. – C-F Jun 10 '15 at 22:55

score 9 · Answer 3 · answered Oct 17 '10 at 12:17

9

Nope, this is not possible. According to the spec, the TBODY element can contain only TR elements.

<!ELEMENT TBODY    O O (TR)+           -- table body -->

what do you want to achieve?

answered Oct 17 '10 at 12:17

Pekka

442,112
142
972
1,088

score 2 · Answer 4 · answered Oct 17 '10 at 12:17

2

I'm afraid you can't do such thing.

According to W3C a tbody can't inside another one.

answered Oct 17 '10 at 12:17

Toto

89,455
62
89
125

score 1 · Answer 5 · answered Oct 17 '10 at 12:16

1

Not likely. If all you want is to 'distinguish' some set of rows, I would assign class inner to each row in question (instead of tbody). Then you easily manipulate those rows with any js framework, like $('tr.inner').show();.

answered Oct 17 '10 at 12:16

Nikita Rybak

67,365
22
157
181

Can a tbody be inside another one?

5 Answers5

Linked