table固定表头
设置table表头固定
·
方案一:通过2个表格实现table固定表头效果,使用colgroup元素进行宽度分配,width代表像素值,如果宽度总和大于table,会撑开table,宽度总和小于table,则自动分配剩余空间,剩最后一个col不写宽度,代表自动分配,根据是否有滚动条自适应宽度。
方案二:通过2个表格,设置td宽度为百分比,渲染完成后设置表头的table宽度和主体table一致
<table class="table table-bordered" style="margin:0;">
<colgroup>
<col name="el-table_1_column_13" width="100">
<col name="el-table_1_column_13" width="100">
<col name="el-table_1_column_13" width="100">
<col name="el-table_1_column_13" width="200">
<col name="el-table_1_column_13" width="">
</colgroup>
<thead>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>籍贯</td>
<td>学历</td>
</tr>
</thead>
</table>
<div style="overflow: auto;max-height:100px;">
<table class="table table-bordered">
<colgroup>
<col name="el-table_1_column_13" width="100">
<col name="el-table_1_column_13" width="100">
<col name="el-table_1_column_13" width="100">
<col name="el-table_1_column_13" width="200">
<col name="el-table_1_column_13" width="">
</colgroup>
<tr>
<td>1</td>
<td>郑小龙</td>
<td>18</td>
<td>湖南</td>
<td>博士</td>
</tr>
<tr>
<td>2</td>
<td>郑小龙</td>
<td>18</td>
<td>湖南</td>
<td>博士</td>
</tr>
</table>
</div>
更多推荐
已为社区贡献2条内容
所有评论(0)