功能分类 第二列 第三列
当前位置:首页 > 日记 > 正文

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

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

相关文章

JavaScript程序设计高级算法之动态

JavaScript程序设计高级算法之动态

动态规划,程序设计,高级算法,实例分析,电脑软件,本文实例讲述了JavaScript程序设计高级算法之动态规划。分享给大家供大家参考,具体如下:主要是看了《数据结构与算法》有所感悟,虽然这本书被挺多人诟病的,说这有漏洞那有漏洞,但并不妨碍我们从中…

Word中出现文档打不开出错误时的操

Word中出现文档打不开出错误时的操

文档,错误,操作方法,打不开,操作步骤,  发现电脑里面的word无法打开,刚开始还以为是整个office崩溃了,然后又试了一下PPT灯片和excel表格,都能正常打开,只有word出问题了。今天,小编就教大家在Word中出现文档打不开出错误时的操作方法。Word中…

如何将Excel2007文本格式转换为数

如何将Excel2007文本格式转换为数

数字,文本,转换为,格式,如何将,  文本格式要将其转换成为数字?首先,文本格式可以通过设置单元格的字体格式得到。以下是小编为您带来的关于将Excel2007文本格式转换为数字,希望对您有所帮助。将Excel2007文本格式转换为数字1、选中要转换格…

JavaScript 事件对内存和性能的影

JavaScript 事件对内存和性能的影

事件,性能,内存,电脑软件,JavaScript,虽说事件处理程序可以为现代 Web 页面添加很强的交互能力,但是不分青红皂白就添加大量的事件处理程序绝对是一种愚蠢的行为。我们来分析一下:事件处理程序本质上是一种函数,是一种对象,存放在内存中,设置大…

excel 使用公式进行文本拼接的方法

excel 使用公式进行文本拼接的方法

方法,文本,公式,电脑软件,excel,  在Excel中经常需要用到公式把文本拼接起来,具体怎么做呢?接下来是小编为大家带来的excel 使用公式进行文本拼接的方法,供大家参考。excel 使用公式进行文本拼接的方法文本拼接步骤1:Excel 2013 单元格字符…

详解基于 axios 的 Vue 项目 http

详解基于 axios 的 Vue 项目 http

请求,优化,项目,详解,电脑软件,对于需要大量使用 http 请求的项目,我们通常会选择对 http 请求的方法进行二次封装,以便增加统一的拦截器,或者统一处理阻止重复提交之类的逻辑。Vue.js 的项目中我们选择使用了 axios 这样一个 http 库,下面也就…

WPS2016怎么样制作堆积柱形图图表

WPS2016怎么样制作堆积柱形图图表

图图,电脑软件,  WPS2016编辑文件的时候,想要插入图表,这就需要设计一个图表。以下是小编为您带来的关于WPS2016制作堆积柱形图图表,希望对您有所帮助。WPS2016制作堆积柱形图图表1、打开【WPS】软件。2、点击【WPS】文字下拉框中的新建,新建…

WPS表格如何添加漂亮的边框和底纹

WPS表格如何添加漂亮的边框和底纹

边框,底纹,表格,漂亮,电脑软件,  WPS表格有很多样式,可以随意的添加边框和底纹,wps中的表格想要制作成更漂亮的效果,就需要添加一些底纹和边框效果。以下是小编为您带来的关于WPS表格添加漂亮的边框和底纹,希望对您有所帮助。WPS表格添加漂亮…

Word中2010版进行为标题段文字添加

Word中2010版进行为标题段文字添加

边框,文字,操作技巧,标题,操作步骤,  在word2010中如何为标题段文字添加阴影边框,具体该怎么去进行操作的呢?今天,小编就教大家在Word中2010版进行为标题段文字添加阴影边框的操作技巧。Word中2010版进行为标题段文字添加阴影边框的操作步…

ppt2013加页码不显示的解决方法

ppt2013加页码不显示的解决方法

解决方法,显示,页码,电脑软件,strong,  ppt2013是一款十分普遍地幻灯片编辑的软件。有时我们编辑的量太大,页数太多,需要插入页码但是不显示怎么办?下面给大家分享PPT页面不显示的解决方法。ppt2013加页码不显示的解决方法步骤1在编辑框中&…

轻松学习Javascript闭包

轻松学习Javascript闭包

闭包,学习,轻松,电脑软件,Javascript,闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。当function里嵌套function时,内部的function可以访问外部function里的变量。function foo(x) { var tmp = 3; functi…

qq安全中心手机密保解绑操作方法

qq安全中心手机密保解绑操作方法

安全中心,操作方法,方法,机密,电脑软件,  关于手机密保如何解绑问题,在此先表示遗憾,因为目前QQ已经不支持解绑功能,因而也不要怀疑为什么找不到&ldquo;解绑&rdquo;按钮。但如果是手机更换或者丢失,那么可以通过更换密保手机实现,今天小编给你…