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

Question

我们如何使用 Bootstrap 创建<thead>2 个级别（例如：Summer Period has 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. 您的第一个thfor State跨越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>

---

这是一个演示小提琴。

这是一个更新的演示（实际上重置为基础），包括 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>