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

Question

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

以下是Excel中的样子:

Answer 1

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

您可以使用colspan和rowspan属性的组合,其中where 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>

这是一个演示小提琴.

这是一个更新的演示(实际上重置为基础),包括bootstrap.css,即使它确实没有任何演示小提琴更新.

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 才能正确显示您的数据