我怎样才能用这样的分组行制作一个表格？

Posted 2023-05-09

【中文标题】我怎样才能用这样的分组行制作一个表格？

【英文标题】：How can I make a table with grouped rows like this?

【发布时间】：2016-12-23 00:19:06

【问题描述】：

我想创建一个表，其中包含与此相似的行组

但我想不通。我尝试使用多个<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>

是的，我知道缩进很古怪，这里的编辑讨厌我

【问题讨论】：

添加一些代码以便人们改进它。

@Tavo 好的，完成了

【参考方案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>

【讨论】：

美丽而简单的答案。谢谢。