一个人可以进入另一个吗？

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

虽然这可能在实践中有效,但它不是合法的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> 

或者,你可以嵌套表,虽然我不会真的推荐它.

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>

Answer 3

不,这是不可能的.根据规范,TBODY元素只能包含TR元素.

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

你想要实现什么？