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 标题设置跨行无效的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
Bootstrap页面标题Page Header的实现方法
本文实例为大家分享了Bootstrap页面标题展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>Bootstrap 页面标题(Page Header)</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap.min.css&
-
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
1.Bootstrap弹出框示例 <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">点我弹出/隐藏弹出框&
-
全面解析Bootstrap排版使用方法(标题)
Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样,具体定义的规则可以如下表所示: <!--Bootstrap中的标题--> <h1>Bootstrap标题一</h1> <h2>Bootstrap标题二</h2> <h3>Bootstrap标题三</h3> <h4>Bootst
-
BootStrap 标题设置跨行无效的解决方法
最近在使用BootStrap的表格做一个报表界面(不需要报表的功能,只需要预览并且行列定好无需根据数据量变化,如有更好的框架欢迎推荐.),发现标题设置跨行属性rowspan无效.html如下: <table class="table table-bordered"> <thead> <th colspan="2" rowspan="2">功能分类</th> <th>第二列</th&
-
Java中设置JAVA_HOME无效的解决方法
前言 如果你的电脑装有不止一个java环境,但是设置JAVA_HOME无效时,可以参考下面的这个方法,下面话不多说了,来一起看看详细的介绍吧. 背景 我的电脑是win7 64位系统,之前学习java时安装了java 7 配置了JAVA_HOME为64位的jdk 7 快速进入环境变量的方法: 点击win的start按钮 在搜索框中输入env,即可快速定位到环境变量选项 用cmd打开窗口,运行java -version ,可以知道当前运行的java版本是java 7 为了适配jetty服务器,又安装
-
ios10以下safari设置style无效的解决方法
项目中遇到的奇怪问题,已定位原因.Attempted to assign to readonly property报错 起因:项目中写了个点击事件,增加动态效果,类似于转一转,rotate(360).很简单的一个特效. 设置元素的transition:transform 1s. 然后动态改变元素的transfrom:rotate的角度.一切看起来没问题.本地测试,真机测试都OK.但是提测后,在测试的IOS10下的safari,竟然没有生效. 定位原因: 一开始以为是transform没有加上前缀
-
python爬虫headers设置后无效的解决方法
此次遇到的是一个函数使用不熟练造成的问题,但有了分析工具后可以很快定位到问题(此处推荐一个非常棒的抓包工具fiddler) 正文如下: 在爬取某个app数据时(app上的数据都是由http请求的),用Fidder分析了请求信息,并把python的request header信息写在程序中进行请求数据 代码如下 import requests url = 'http://xxx?startDate=2017-10-19&endDate=2017-10-19&pageIndex=1&l
-
ASP.NET在MVC中MaxLength特性设置无效的解决方法
本文实例讲述了ASP.NET在MVC中MaxLength特性设置无效的解决方法.分享给大家供大家参考.具体分析如下: 一.问题: 在ASP.NET MVC项目中,给某个Model打上了MaxLength特性如下: 复制代码 代码如下: public class SomeClass { [MaxLength(16, ErrorMessage = "最大长度16")] public string SomeProperty{get;set;} } 但在其对应的表单元素中并没有
-
Android使用TextView,设置onClick属性无效的解决方法
Android在布局文件中为View提供了onClick属性,使用方法如下: <TextView android:id="@+id/user" android:layout_width="@dimen/px_171" android:layout_height="fill_parent" android:onClick="iconClickListener" android:clickable="true&qu
-
JQuery 设置checkbox值二次无效的解决方法
在此MVC ASP.NET 项目,我利用jquery ajax传输数据给后台controller控制层,返回数据给JQuery数据. 首先必须清除checkbox的选中,因为是ajax的异步操作,是不刷新页面的,所以需要手段充值控件值,使得其为空,不影响下次的拿到数据显示. 言归正传,$("#checkboxID").attr('checked', false);//设置checkbox为不选中状态, $("#checkboxID").attr('checked',
-
thinkphp中session和cookie无效的解决方法
本文实例讲述了thinkphp中session和cookie无效的解决方法.分享给大家供大家参考.具体分析如下: 问题描述: 在本地调试时session和cookie是用没有问题的,我是用session保存当前登录账户的信息,上传服务器之后,发现跳转之后session不复存在,为什么呢?在当前页面输出session是存在的. 遇到这个问题三天了,因为是自学没有老师可以请教,身边也没有几个是弄PHP的,所以真的是很悲剧,于是乎百度,而百度上很多人都是屁话连天,没有什么可以解决问题的,经过三天的修改
-
wxpython中Textctrl回车事件无效的解决方法
本文实例讲述了wxpython中Textctrl回车事件无效的解决方法.分享给大家供大家参考,具体如下: 今天使用wxptyhon的Textctrl控件开发客户端时遇到了一个问题, 按照HTML表单的逻辑, 我们在Textctrl里回车应该提交查询, 但是wxpython的Textctrl很奇怪, 回车了居然是像Tab作用一样跳转到下一个控件.这样的话,要完成查询, 要么是鼠标点击按钮, 要么需要按两次或者两次以上. Google了一下, 无答案, 但是得到了一些有用的资料: TextCtrl支
-
jQuery 更改checkbox的状态,无效的解决方法
今天写页面遇到复选框动态全选或全不选问题,正常写法如下: $("#tb").find("input[type='checkbox']").attr("checked","checked"); but!第一次点击全选按钮input显示对勾,第二次就不行了,查了下有建议用prop的,亲测有效.那两者有啥区别呢? jQuery函数attr()和prop()的区别: 1.操作对象不同 "attr"和"pr
随机推荐
- iOS 动画 —— 礼花效果实例详细
- vs快捷键 用好Ctrl+Enter与Ctrl+Shift+Enter组合键让你的编辑代码速度快了很多
- JQuery中如何传递参数如click(),change()等具体实现
- Windows系统组策略应用最新技巧
- textarea焦点的用法实现获取焦点清空失去焦点提示效果
- JS实现图片上传预览功能
- JavaScript数据结构链表知识详解
- Javascript计算二维数组重复值示例代码
- jQuery插件学习教程之SlidesJs轮播+Validation验证
- js离开或刷新页面检测(且兼容FF,IE,Chrome)
- PhpStorm terminal无法输入命令的解决方法
- 修改正确的asp冒泡排序
- Zend Framework中的简单工厂模式 图文
- php模拟post上传图片实现代码
- 过虑特殊字符输入的js代码
- linux系统下dd命令的使用方法
- python中sys.argv参数用法实例分析
- Ajax调用restful接口传送Json格式数据的方法
- 微信支付PHP SDK —— 公众号支付代码详解
- 老生常谈Python startswith()函数与endswith函数