html - 一个 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 应用于内部 tbody。 但是最后一个 TR 被认为是在外部 tbody 之外，因为我希望它在外部 tbody 内部。

我该怎么做？

Answer 1

虽然这在实践中可能有效，it is not legal 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> 

或者，您可以嵌套表格，但我并不推荐这样做。