Bootstrap表固定头colspan不工作

时间:2017-01-21 08:59:14

标签: css twitter-bootstrap html-table fixed-header-tables

我有一个固定标头的引导程序表。它工作正常。

当我在表格中添加colspan时。表格崩溃了。

还有其他可能同时实现fixed header和表格colspan

先谢谢

DEMO: FIDDLE

CSS

.table-fixed thead {
   width: 97%;
}
.table-fixed tbody {
  height: 230px;
  overflow-y: auto;
  width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td,               .table-fixed th {
   display: block;
}
.table-fixed tbody td, .table-fixed thead > tr> th {
  float: left;
  border-bottom-width: 0;
}

输出:

enter image description here

1 个答案:

答案 0 :(得分:2)

为了在保持全宽的单元格上使用colspan,你必须更改td类,以维护bootstrap的12列布局。

例如,您可以替换它:

ViewDialog alert = new ViewDialog();
        alert.showDialog(ReceivingOTPRegActivity.this, "OTP has been sent to your Mail ");

用这个:

<tr>
    <td class="col-xs-2">1</td>
    <td class="col-xs-8">Mike Adams</td>
    <td class="col-xs-2">23</td>
</tr>

因此,<tr> <td class="col-xs-2">1</td> <td colspan="2" class="col-xs-10">Mike Adams</td> <!--<td class="col-xs-2">23</td>--> </tr> 加价变为<td class="col-xs-8">,以维持12列布局。

JSFiddle