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


Posted in Javascript onOctober 25, 2017

最近在使用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 标题设置跨行无效的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery对象和DOM对象的相互转化实现代码
Mar 02 Javascript
JS性能优化笔记搜索整理
Aug 21 Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
微信小程序实现实时圆形进度条的方法示例
Feb 24 Javascript
JavaScript 自定义事件之我见
Sep 25 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
layui之table checkbox初始化时选中对应选项的方法
Sep 02 Javascript
Layui Form 自定义验证的实例代码
Sep 14 Javascript
js实现磁性吸附的示例
Oct 26 Javascript
vue基于mint-ui的城市选择3级联动的示例
Oct 25 #Javascript
浅谈Vue的加载顺序探讨
Oct 25 #Javascript
JavaScript模块模式实例详解
Oct 25 #Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 #Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
Oct 25 #Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
Oct 25 #Javascript
vue语法之拼接字符串的示例代码
Oct 25 #Javascript
You might like
用PHP函数解决SQL injection
2006/10/09 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
javascript之更有效率的字符串替换
2008/08/02 Javascript
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
Perl Substr()函数及函数的应用
2015/12/16 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
基于vue的下拉刷新指令和滚动刷新指令
2016/12/23 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
JS中判断字符串存在和非空的方法
2018/09/12 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
2019/01/18 jQuery
vue中轮训器的使用
2019/01/27 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
Django框架下在URLconf中指定视图缓存的方法
2015/07/23 Python
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
2018/04/27 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
2019/07/07 Python
Python下载的11种姿势(小结)
2020/11/18 Python
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
专门出售各种儿童读物的网站:Put Me In The Story
2016/08/07 全球购物
团员的自我评价
2013/12/01 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
期末个人总结范文
2015/02/13 职场文书
龙猫观后感
2015/06/09 职场文书
上甘岭观后感
2015/06/10 职场文书
假期读书倡议书3篇
2019/08/19 职场文书
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers