使用Twitter引导创建合并表单元格

作者

如何使用引导创建&lt；thead&gt具有两个级别（例如：夏季有子数据1、数据2、数据3）以及合并了两个垂直单元格的表格单元格（例如：状态）

下面是它在Excel中的外观：

我不确定如何使用Bootstrap实现，但我知道如何使用HTML实现：

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

  1. 根据表格标题的级别将其拆分为行。
    因此，第一个表行将由“父”标题组成，即每一个其他标题和数据块将属于的标题

  2. 您的第一行应该有3列：状态，公用事业公司和夏季

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

让我们应用以下属性：

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

生成的HTML如下所示：

&lt；thead&gt；
&lt；tr&gt；
&lt；第行span=“2”&gt；国家&lt/th&gt；
&lt；第行span=“2”&gt；公用事业公司&lt/th&gt；
&lt；th colspan=“3”&gt；夏季&lt/th&gt；
&lt/tr&gt；
&lt；tr&gt；
&lt；th&gt；数据1&lt/th&gt；
&lt；th&gt；数据2&lt/th&gt；
&lt；th&gt；数据3&lt/th&gt；
&lt/tr&gt；
&lt/thead&gt；

这是一把小提琴的演示

这里有一个更新的演示（实际上重置为base），包括bootstrap.css，尽管它实际上没有更新任何演示

相关文章：

  1. 如何使图元水平居中
  2. 使用CSS更改HTML5输入的占位符颜色
  3. 为什么HTML认为“chucknorris”是一种颜色？
  4. 在CSS中设置单元格填充和单元格间距？

发表评论

© 2026 开发百科-程序代码问答平台 • Built with