BootStrap标题设置跨行无效怎么办

这篇文章主要为大家展示了“BootStrap标题设置跨行无效怎么办”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“BootStrap标题设置跨行无效怎么办”这篇文章吧。

最近在使用BootStrap的表格做一个报表界面（不需要报表的功能，只需要预览并且行列定好无需根据数据量变化，如有更好的框架欢迎推荐。），发现标题设置跨行属性rowspan无效。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>

效果如下：

以上是“BootStrap标题设置跨行无效怎么办”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！