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

2024-05-06 15:46:16

字体：大中小

来源：转载

供稿：网友

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>

效果如下：