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 相关文章推荐
js的event详解。
Sep 06 Javascript
js 蒙版进度条(结合图片)
Mar 10 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
Aug 28 Javascript
Bootstrap的图片轮播示例代码
Aug 31 Javascript
jquery特效 点击展示与隐藏全文
Dec 09 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
Mar 05 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
mpvue+vant app搭建微信小程序的方法步骤
Feb 11 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
node.js中path路径模块的使用方法实例分析
Feb 13 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数字格式化
2006/12/06 PHP
使用PHP数组实现无限分类,不使用数据库,不使用递归.
2006/12/09 PHP
discuz 首页四格:最新话题+最新回复+热门话题+精华文章插件
2007/08/19 PHP
php学习笔记 php中面向对象三大特性之一[封装性]的应用
2011/06/13 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
动态加载script文件的两种方法
2013/08/15 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
2016/01/28 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
2016/12/13 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
详解JavaScript中的坐标和距离
2019/05/27 Javascript
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
解决vant title-active-color与title-inactive-color不生效问题
2020/11/03 Javascript
Python中不同进制的语法及转换方法分析
2016/07/27 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
世界上最大的乐器零售商:Guitar Center
2017/11/07 全球购物
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
幼师专业求职推荐信
2013/11/08 职场文书
医生个人自我剖析材料
2014/10/08 职场文书
2015年度质量工作总结报告
2015/04/27 职场文书
幼儿园小班开学寄语
2015/05/27 职场文书
幼儿园教师管理制度
2015/08/05 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers
Python爬虫之用Xpath获取关键标签实现自动评论盖楼抽奖(二)
2021/06/07 Python
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers
使用Ajax实现进度条的绘制
2022/04/07 Javascript