BootStrap标题怎么设置禁止跨行
作者: default|标签:bootstrap 禁止 设置|2018-4-17 09:37

这次给大家带来BootStrap标题怎么设置禁止跨行,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>

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

JS获取当前地理位置案列详解

parabola.js实现抛物线与加入购物车功能

eventBus兄弟组件通信详解

以上就是BootStrap标题怎么设置禁止跨行的详细内容,更多请关注php中文网其它相关文章!

735
点赞
收藏
分享:
0/300