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

效果如下：

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

解决方案：

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

 1 <table class="table table-bordered">
 2   <tr>
 3     <th colspan="2" rowspan="2">功能分类</th>
 4     <th>第二列</th>
 5     <th>第三列</th>
 6     <th>第四列</th>
 7     <th>第五列</th>
 8   </tr>
 9   <tr>
10     <td>第一列</td>
11     <td>第二列</td>
12     <td>第三列</td>
13     <td>第四列</td>
14     <td>第五列</td>
15   </tr>
16   <tr>
17     <td>第一列</td>
18     <td>第二列</td>
19     <td>第三列</td>
20     <td>第四列</td>
21     <td>第五列</td>
22   </tr>
23 </tabel>
View Code

效果如下：

具体原因未查明，欢迎指教。

如有更好的解决方案也欢迎补充，谢谢。

posted @ 2017-10-25 10:23  SunShine_2017  阅读(1334)  评论(0)  编辑  收藏  举报