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>

或者，您可以嵌套表格，但我不建议这样做。

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

不，这是not possible。根据规范，TBODY元素只能包含TR元素。

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

你想达到什么目标？

Answer 4

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

Answer 5

我担心你不能这样做。

根据W3C，一个人不能进入另一个人。

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

5 个答案: