引导表固定标题 colspan 不起作用答案

【问题标题】：Bootstrap table fixed header colspan not working引导表固定标题 colspan 不起作用
【发布时间】：2017-06-06 06:11:09
【问题描述】：

我有一个带有固定标题的引导表。它工作正常。

当我在表中添加colspan 时。表被折叠。

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

提前致谢

演示： 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;
}

输出：

【问题讨论】：

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

【解决方案1】：

为了在保持全宽的单元格上使用 colspan，您必须更改 td 类，以保持引导程序的 12 列布局。

例如，你可以替换这个：

<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"> 标记变为<td colspan="2" class="col-xs-10">，以保持 12 列布局。

JSFiddle

【讨论】：