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

2020-05-24 21:33:03易采站长站整理

最近在使用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 标题设置跨行无效的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持!