相思资源网 Design By www.200059.com

最近在使用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>

效果如下:

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

可以看到图上效果,“功能分类”这个单元格属性设置了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 标题设置跨行无效的解决方法

总结

以上所述是小编给大家介绍的BootStrap 标题设置跨行无效的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

标签:
bootstrap,标题设置跨行无效

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“BootStrap 标题设置跨行无效的解决方法”

暂无BootStrap 标题设置跨行无效的解决方法的评论...