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

Creating merged table cells using Twitter Bootstrap

提问by Nyxynyx

How can we use Bootstrap to create <thead>with 2 levels (eg: Summer Period has hildren data1, data2, data3) and also table cells that merged 2 vertical cells (eg:State)?

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

Here's how it looks like in Excel:

这是它在 Excel 中的样子：

回答by albert

I'm not sure how exactly to do it with Bootstrap, but I know how to do it in HTML:

我不确定如何使用 Bootstrap 完成它，但我知道如何在 HTML 中完成它：

---

---

You can use a combination of the colspanand rowspanattributes, where rowspanis used for table headers spanning multiple rows, and the same applies to colspanand columns.

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

1. Break up your table headers into rows, according to their levels.
   So the first table row will consist of your "parent" headers, i.e. the headers that every other header and piece of data is going to fall under.

2. Your first row should have 3 columns: State, Utilities Companyand Summer Period.

3. Add subsequent header rows for each level you drill down. Here, your next row will simply be the table headers for each data set.

1. 根据级别将表格标题分成几行。
   所以第一个表格行将包含您的“父”标题，即每个其他标题和数据将属于的标题。

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

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

---

---

Let's apply the attributes:

让我们应用这些属性：

1. Your 1st thfor Statespans 2 rows, so we add rowspan="2".
2. The same applies to the next table header, Utilities Company.
3. Summer Periodspans 1 rowand 3 columns, so we add colspan="3"
4. Add another trin the header, containing the 3 cells for data1, data2and data3.

1. 你的第一个th为国跨度2行，所以我们添加rowspan="2"。
2. 这同样适用于下一个表头Utilities Company。
3. 夏季跨越1行和3列，所以我们增加colspan="3"
4. tr在标题中添加另一个，包含data1、data2和data3的 3 个单元格。

The resulting HTML looks like this:

生成的 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>

---

---

Here is a demo fiddle.

这是一个演示小提琴。

Here's an updated demo (actually reset as base) including bootstrap.css even though it literally does nothing demo fiddle updated.

这是一个更新的演示（实际上重置为基础），包括 bootstrap.css 即使它实际上没有做任何演示小提琴更新。

回答by Maxime

Creating a complex header with multiple lines in Bootstrap is exactly as it is in HTML. Here is your table in HTML for Bootstrap:

在 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>

You may have to add some CSS between your first and second header row to display your data correctly

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

回答by abhishek kumar

<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>