纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

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

SunShine_2017   2021-03-28 我要评论
想了解BootStrap 标题设置跨行无效的解决办法的相关内容吗,SunShine_2017在本文为您仔细讲解bootstrap 标题设置跨行无效的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点: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>

效果如下:

可以看到图上效果,“功能分类”这个单元格属性设置了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 标题设置跨行无效的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


相关文章

猜您喜欢

  • Hadoop Data Locality Hadoop上Data Locality的详解

    想了解Hadoop上Data Locality的详解的相关内容吗,csguo007在本文为您仔细讲解 Hadoop Data Locality的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Hadoop上Data,Locality的详解,Hadoop上Data,Locality的使用,下面大家一起来学习吧。..
  • Android自定view画圆效果 Android自定view画圆效果

    想了解Android自定view画圆效果的相关内容吗,sunzhi_在本文为您仔细讲解Android自定view画圆效果的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Android,view,画圆,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.9aisf.com 【就爱软件站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式