图片 10

标题设置跨行无效

By admin in web前端 on 2019年5月6日

近年来在应用BootStrap的报表做1个报表分界面(无需报表的功能,只要求预览并且行列定好不要求依据数据量变化,如有越来越好的框架招待推荐。),开掘题目设置跨行属性rowspan无效。html如下:

BootStrap 标题设置跨行无效,bootstrap题目无效

近日在运用BootStrap的报表做二个报表分界面(无需报表的功能,只必要预览并且行列定好无需依附数据量变化,如有越来越好的框架应接推荐。),发掘标题设置跨行属性rowspan无效。html如下:

图片 1

<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>

View Code

作用如下:

图片 2

能够看来图上效果,“功用分类”那么些单元格属性设置了colspan=”二”
rowspan=”贰”,不过只有colspan=”贰”起了成效。

消除方案:

决不将急需跨行的单元格放在<thead>标签中,能够如下设置:

图片 3

 1 <table class="table table-bordered">
 2   <tr>
 3     <th colspan="2" rowspan="2">功能分类</th>
 4     <th>第二列</th>
 5     <th>第三列</th>
 6     <th>第四列</th>
 7     <th>第五列</th>
 8   </tr>
 9   <tr>
10     <td>第一列</td>
11     <td>第二列</td>
12     <td>第三列</td>
13     <td>第四列</td>
14     <td>第五列</td>
15   </tr>
16   <tr>
17     <td>第一列</td>
18     <td>第二列</td>
19     <td>第三列</td>
20     <td>第四列</td>
21     <td>第五列</td>
22   </tr>
23 </tabel>

View Code

效益如下:

图片 4

实际原因未查明,接待指教。

如有越来越好的化解方案也应接补充,多谢。

标题设置跨行无效,bootstrap标题无效
方今在应用BootStrap的报表做二个表格分界面(不要求报表的效能,只须要预览并且行列定好无需…

图片 5图片 6

<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>

View Code

功效如下:

图片 7

能够看出图上成效,“功效分类”那个单元格属性设置了colspan=”贰”
rowspan=”二”,不过唯有colspan=”二”起了服从。

杀鸡取卵方案:

毫无将索要跨行的单元格放在<thead>标签中,能够如下设置:

图片 8图片 9

 1 <table class="table table-bordered">
 2   <tr>
 3     <th colspan="2" rowspan="2">功能分类</th>
 4     <th>第二列</th>
 5     <th>第三列</th>
 6     <th>第四列</th>
 7     <th>第五列</th>
 8   </tr>
 9   <tr>
10     <td>第一列</td>
11     <td>第二列</td>
12     <td>第三列</td>
13     <td>第四列</td>
14     <td>第五列</td>
15   </tr>
16   <tr>
17     <td>第一列</td>
18     <td>第二列</td>
19     <td>第三列</td>
20     <td>第四列</td>
21     <td>第五列</td>
22   </tr>
23 </tabel>

View Code

功能如下:

图片 10

现实原因未考察,欢迎指教。

如有越来越好的缓和方案也应接补充,多谢。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2020 澳门新葡亰官网app 版权所有