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排版使用方法(标题)
Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样,具体定义的规则可以如下表所示: <!--Bootstrap中的标题--> <h1>Bootstrap标题一</h1> <h2>Bootstrap标题二</h2> <h3>Bootstrap标题三</h3> <h4>Bootst
-
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页面标题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
随机推荐
- MSScriptControl.ScriptControl组件的用法实例
- 实测在class的function中include的文件中非php的global全局环境
- 添加网站到安全站点.设置安全站点打开ActiveX时提示.去页眉页脚的vbs代码
- jquery ajax 如何向jsp提交表单数据
- ExtJS 2.0实用简明教程之应用ExtJS
- 使用vue构建一个上传图片表单
- AngularJS Toaster使用详解
- PHP自定义函数格式化json数据示例
- 用批处理轻松清掉sxs.exe和autorun.inf的专杀工具
- Java中计算时间差的方法
- mac系统下为 php 添加 pcntl 扩展
- php随机输出名人名言的代码
- PHP两种去掉数组重复值的方法比较
- php实现阳历阴历互转的方法
- 十二、脚本元素、指令和预定义变量
- js倒计时小程序
- SQL Server 更改DB的Collation
- 目前比较流行的ASP木马主要通过三种技术来进行对服务器的相关操作
- Java socket字节流传输示例解析
- va_list(),va_start(),va_arg(),va_end() 详细解析