BootStrap 标题设置跨行无效的解决方法
来源：爱站网时间：2020-01-17编辑：网友分享
BootStrap 标题设置跨行无效的解决方法大家都知道吗？BootStrap 标题设置跨行无效方便预览，不需要根据数据的变化而变化，本文是爱站技术频道小编和大家分享的知识，希望能帮助到大家。
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>
效果如下：
上文是爱站技术频道小编为大家带来的BootStrap 标题设置跨行无效的解决方法，爱站技术频道对于很多程序员是一个很好的学习平台，希望大家能一如既往的支持我们。
