Bootstrap table 修复了 header colspan 不工作
Bootstrap table fixed header colspan not working
我有一个 bootstrap table 已经修复了 header。它工作正常。
当我在table中添加colspan
时。 Table 崩溃了。
有没有其他可能同时实现fixed header
和tablecolspan
提前致谢
演示: 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;
}
输出:
为了在保持完整宽度的单元格上使用 colspan,您必须更改 td class,以保持 bootstrap 的 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">
mark-up 变为 <td colspan="2" class="col-xs-10">
,以保持 12 列布局。
我有一个 bootstrap table 已经修复了 header。它工作正常。
当我在table中添加colspan
时。 Table 崩溃了。
有没有其他可能同时实现fixed header
和tablecolspan
提前致谢
演示: 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;
}
输出:
为了在保持完整宽度的单元格上使用 colspan,您必须更改 td class,以保持 bootstrap 的 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">
mark-up 变为 <td colspan="2" class="col-xs-10">
,以保持 12 列布局。