【问题标题】: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>
    

    因此,&lt;td class="col-xs-8"&gt; 标记变为&lt;td colspan="2" class="col-xs-10"&gt;,以保持 12 列布局。

    JSFiddle

    【讨论】:

      猜你喜欢
      • 2015-06-29
      • 2014-07-09
      • 2021-03-07
      • 2019-07-20
      • 2018-08-07
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-03-22
      相关资源
      最近更新 更多