一个tbody可以放在另一个tbody里面吗？

Question

是否可以像这样在外层tbody内部放置一个内层tbody：

以下是示例CSS：

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

这里是示例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>

我想把class1的CSS应用于外部tbody，把class2的CSS应用于内部tbody。但是我希望最后一个TR被视为在外部tbody内，而不是在外部tbody之外。

我该如何做到这一点？

- bourbaki

Answer 1

虽然这种方法在实践中可能有效，但它不是合法的HTML。

但是，在单个TABLE元素中允许有多个TBODY元素，因此您可以这样做：

<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> 

另外，您可以尝试嵌套表格，尽管我不会真正推荐这样做。

- Michael Madsen

---

但是我有一个例子，它可以工作 https://codepen.io/andornagy/pen/gaGBZz。也许你可以帮我，将这个HTML结构更正，但它应该像以前一样工作。我会非常感激你的帮助。 - Pavlo Chechehov

Answer 2

创建另一个表并在此后使用 tbody 是一种方法：

<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>

- Sarfraz

---

非常感谢，但我更倾向于Michael Madsen的答案。 - bourbaki

这是原问题的正确答案，因为它允许在tbody元素内包含tbody元素，这正是所要求的。这样可以根据父tbody id和子tbody class进行选择，如有需要。 - amaster

这个答案在形式上可能是正确的，但是没有意义。不同表格的 tbodies 将属于不同的表格，因此它们的列不会对齐。 - C-F

Answer 3

不行，这是不可能的。根据规范，TBODY元素只能包含TR元素。

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

你想要实现什么目标？

- Pekka

Answer 4

很抱歉，您无法做此事。

根据W3C的规定，一个tbody不能再嵌套另一个tbody中。

- Toto

Answer 5

不太可能。如果你只是想'区分'某些行，我会将类inner分配给每一行（而不是tbody）。然后你可以使用任何js框架轻松操纵这些行，例如$('tr.inner').show();。

- Nikita Rybak