BootStrap 标题设置跨行无效的解决方法

2020-01-17 08:52:53来源：爱站网阅读 ()

BootStrap 标题设置跨行无效的解决方法大家都知道吗？BootStrap 标题设置跨行无效方便预览，不需要根据数据的变化而变化，本文是爱站技术频道小编和大家分享的知识，希望能帮助到大家。

html如下：

<table class="table table-bordered">
 <thead>
  <th colspan="2" rowspan="2">功能分类</th>
  <th>第二列</th>
  <th>第三列</th>
  <th>第四列</th>
  <th>第五列</th>
 </thead>
 <tr>
  <td>第一列</td>
  <td>第二列</td>
  <td>第三列</td>
  <td>第四列</td>
  <td>第五列</td>
 </tr>
 <tr>
  <td>第一列</td>
  <td>第二列</td>
  <td>第三列</td>
  <td>第四列</td>
  <td>第五列</td>
 </tr>
</tabel>

效果如下：

可以看到图上效果，“功能分类”这个单元格属性设置了colspan="2" rowspan="2"，但是只有colspan="2"起了效果。

解决方案：

不要将需要跨行的单元格放在<thead>标签中，可以如下设置：

<table class="table table-bordered">
 <tr>
  <th colspan="2" rowspan="2">功能分类</th>
  <th>第二列</th>
  <th>第三列</th>
  <th>第四列</th>
  <th>第五列</th>
 </tr>
 <tr>
  <td>第一列</td>
  <td>第二列</td>
  <td>第三列</td>
  <td>第四列</td>
  <td>第五列</td>
 </tr>
 <tr>
  <td>第一列</td>
  <td>第二列</td>
  <td>第三列</td>
  <td>第四列</td>
  <td>第五列</td>
 </tr>
</tabel>

效果如下：