我該如何製作這樣的分組行？

Question

我想要有行組的表格看起來類似於此

但我不能完全弄清楚。我試過使用多個<tbody>元素，在我的<td>元素上調整colspan，但這兩個元素都不適合我。如果它使任務更容易，我使用jQuery DataTables。

編輯：這裏就是我有

<table id="groupedTable"> 
     <thead> 
      <tr> 
       <th>Group</th>         
       <th>Name</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Group1</td> 
       <td>test</td> 
      </tr> 
      <tr> 
       <td>Group1</td> 
       <td>test</td> 
      </tr> 
      <tr> 
       <td>Group1</td> 
       <td>test</td> 
      </tr> 
      <tr> 
       <td>Group1</td> 
       <td>test</td> 
      </tr> 
      <tr> 
       <td>Group1</td> 
       <td>test</td> 
      </tr> 
      <tr> 
       <td>Group1</td> 
       <td>test</td> 
      </tr> 
     </tbody> 
     <tbody> 
      <tr> 
       <td>Group2</td> 
       <td>test</td> 
      </tr> 
      <tr> 
       <td>Group2</td> 
       <td>test</td> 
      </tr> 
      <tr> 
       <td>Group2</td> 
       <td>test</td> 
      </tr> 
      <tr> 
       <td>Group2</td> 
       <td>test</td> 
      </tr> 
      <tr> 
       <td>Group2</td> 
       <td>test</td> 
      </tr> 
      <tr> 
       <td>Group2</td> 
       <td>test</td> 
      </tr> 
     </tbody> 

    </table> 

是的，我知道壓痕是古怪的，通過在這裏編輯恨我

Answer 1

我相信你正在尋找rowspan。這個小提琴是如何爲你工作的？

jsFiddle

<table> 
    <tr> 
    <th>Group</th> 
    <th>Name</th> 
    </tr> 
    <tr> 
    <td rowspan="4">Group 1</td> 
    </tr> 
    <tr> 
    <td>Test</td> 
    </tr> 
    <tr> 
    <td>Test</td> 
    </tr> 
    <tr> 
    <td>Test</td> 
    </tr> 
    <tr> 
    <td rowspan="4">Group 2</td> 
    </tr> 
    <tr> 
    <td>Test</td> 
    </tr> 
    <tr> 
    <td>Test</td> 
    </tr> 
    <tr> 
    <td>Test</td> 
    </tr> 
</table>