css实现固定table表格
要实现固定表格,可以使用CSS中的position和overflow属性,具体步骤如下:
给表格外层容器div设置固定高度和宽度,overflow属性设置为auto或scroll,这样就会出现滚动条。
将表格放在容器div内,并设置表格的宽度为100%。
给表格的thead和tbody分别设置position属性为sticky,top属性为0,这样表头就能固定在页面顶部。
如果表格有左侧固定列,可以将左侧列单独放在一个table中,然后设置这个table的position属性为absolute,left属性为0,这样左侧列就能固定在页面左侧。
CSS代码示例如下:
.table-container {
width: 500px;
height: 300px;
overflow: auto;
}
table {
width: 100%;
}
thead th,
tbody td {
position: sticky;
top: 0;
}
.left-column {
position: absolute;
left: 0;
}
css实现固定table表格最后两列,其他滚动查看
要实现固定表格的最后两列,可以使用CSS中的position和transform属性,具体步骤如下:
将表格放在一个容器div内,并设置容器div的宽度为表格的宽度加上要固定的最后两列的宽度。
将表格的最后两列单独放在一个table中,并将这个table放在容器div的右侧,设置这个table的position属性为absolute,right属性为0。
给容器div设置overflow属性为auto或scroll,这样就会出现滚动条。
给右侧表格的tbody中的每一行tr设置transform属性为translateX(-100%),这样就能将最后两列移动到表格外面,避免重叠。
CSS代码示例如下:
.table-container {
width: 800px; /* 表格宽度 + 最后两列的宽度 */
overflow: auto;
position: relative;
}
table {
width: 100%;
}
.right-column {
position: absolute;
right: 0;
top: 0;
}
.right-column tbody tr {
transform: translateX(-100%);
}
需要注意的是,这种方式只适用于固定的最后两列,如果要固定其他列,需要根据实际情况进行调整。
css 设置table表格中各个单元格宽度
你可以使用CSS中的table-layout
属性来设置表格中各个单元格的宽度。下面是一个简单的示例代码:
<table style="width:100%; table-layout:fixed;">
<tr>
<td style="width:20%;">单元格1</td>
<td style="width:80%;">单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
在上面的代码中,table-layout:fixed
属性告诉浏览器使用固定表格布局,并且每个单元格的宽度都将根据其width
属性进行设置。在这个例子中,第一个单元格的宽度为表格总宽度的20%,第二个单元格的宽度为表格总宽度的80%。
你可以根据需要修改单元格的宽度和表格的布局属性来满足你的需求。
相关推荐










