创建嵌套表行

Question

我需要创建一个具有多个嵌套行的复杂表.

我目前的理解是你不能在HTML表格中嵌套行.例如,

<table>
  <tr>
    <td>header one</td>
    <td>header two</td>
  </tr>

  <tr>
    <td>One</td>
    <td>
      <!-- nested row -->
      <tr>
        <td>nested one</td>
        <td>nested two</td>
      </tr>
    </td>
  </tr>
</table>

期望创造:

这是一个非常简单的例子.我需要生成的表有几个嵌套的行.

我知道有rowspan用于设置行的table属性.但是,我想知道是否有任何开源JavaScript库或替代方法来创建嵌套表行,而不必使用该rowspan属性.

Answer 1

您需要首先将嵌套包装tr在新table元素中.所以它看起来像:

table { width: 100%; border-collapse: collapse;}
td { border: 1px solid #000; }
td table { 
  margin: -2px;
  width: calc(100% + 4px);
}

<table>
      <tr>
        <td>header one</td>
        <td>header two</td>
      </tr>
    
      <tr>
        <td>One</td>
        <td>
    
          <!-- nested row -->
          <table>
           <tr>
             <td>nested one</td>
           </tr>
           <tr>
             <td>nested two</td>
           </tr>
          </table>
    
        </td>
      </tr>
    </table>

tr只能是一个孩子table,thead,tfoot,等.

rowspan 但是风格更容易:

table { width: 100%; border-collapse: collapse; }
td { border: 1px solid #000; }

    <table>
      <tr>
        <td>header one</td>
        <td>header two</td>
      </tr>
    
      <tr>
        <td rowspan="2">One</td>
        <td>nested one</td>
      </tr>
      <tr>
        <td>nested two</td>
      </tr>
    </table>