使用Twitter Bootstrap创建合并的表格单元格

Question

我们如何使用Bootstrap创建具有2个级别的<thead>（例如：Summer Period具有hildren data1，data2，data3）以及合并2个垂直单元格的表格单元格（例如：State）？

以下是Excel中的样子：

Answer 1

我不确定如何使用Bootstrap来完成它，但我知道如何在HTML中执行此操作：

---

您可以使用colspan和rowspan属性的组合，其中rowspan用于跨多个行的表格标题，同样适用于colspan和列。

1. 根据级别将表格标题分成几行 因此，第一个表行将包含您的“父”标题，即每个其他标题和数据片段都将包含在其中的标题。

2. 您的第一行应该有3列：State，Utilities Company和Summer Period。

3. 为您向下钻取的每个级别添加后续标题行。在这里，您的下一行将只是每个数据集的表头。

---

让我们应用属性：

1. 州的第一个th跨越 2行，因此我们添加了rowspan="2"。
2. 这同样适用于下一个表格标题 Utilities Company 。
3. 夏季期跨越 1行和 3列，因此我们添加colspan="3"
4. 在标头中添加另一个tr，其中包含 data1 ， data2 和 data3 的3个单元格。

生成的HTML如下所示：

<thead>
  <tr>
    <th rowspan="2">State</th>
    <th rowspan="2">Utilities Company</th>
    <th colspan="3">Summer Period</th>
  </tr>
  <tr>
    <th>data1</th>
    <th>data2</th>
    <th>data3</th>
  </tr>
</thead>

---

这是demo fiddle。

这是一个更新的演示（实际上重置为基础），包括bootstrap.css，即使它实际上什么都不做demo fiddle updated。

Answer 2

在Bootstrap中创建一个包含多行的复杂标题，就像在HTML中一样。以下是用于Bootstrap的HTML表格：

<table class="table table-bordered">
  <thread>
    <tr>
      <th>State</th>
      <th>Utilities Company</th>
      <th colspan="3">Summer Period</th>
    </tr>
    <tr>
      <th></th>
      <th></th>
      <th>data1</th>
      <th>data2</th>
      <th>data3</th>
    </tr>
  </thread>
  <tbody>
    ... data here ...
  </tbody>
</table>

您可能需要在第一个和第二个标题行之间添加一些CSS才能正确显示数据

Answer 3

<table class="table table-bordered">
  <thread>
    <tr>
      <th rowspan="2">State</th>
      <th rowspan="2">Utilities Company</th>
      <th colspan="3">Summer Period</th>
    </tr>
    <tr>
      <th>data1</th>
      <th>data2</th>
      <th>data3</th>
    </tr>
  </thread>
  <tbody>
    ... data here ...
  </tbody>
</table>