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弹出框之自定义悬停框标题、内容和样式示例代码
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页面标题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 标题设置跨行无效的解决方法
最近在使用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
随机推荐
- Basic求10000以内的完美数
- 探讨Mysql中OPTIMIZE TABLE的作用详解
- jQuery图片滚动图片的效果(另类实现)
- jQuery监控文本框事件并作相应处理的方法
- Windows Route 路由表命令整理
- Java常用字符串方法小结
- php 图像函数大举例(非原创)
- php上传图片存入数据库示例分享
- Android Naive与WebView的互相调用详解
- Android使用分类型RecyclerView仿各大商城首页
- 详解vee-validate的使用个人小结
- 浅析JavaScript 调试方法和技巧
- jsp网页计数器实现示例
- Linux下启动tomcat的方法
- MongoDB安装图文教程
- php实现jQuery扩展函数
- js锁屏解屏通过对$.ajax进行封装实现
- Vee-Validate的使用方法详解
- firefox background-image垂直平铺问题的解决方法
- 用Visual Studio2017写C++静态库图文详解