要实现在不同屏幕尺寸下,CSS表格固定列位置改变,可以使用媒体查询和CSS的position属性来实现。以下是一个示例代码:
HTML代码:
固定列1
列2
列3
列4
列5
数据1
数据2
数据3
数据4
数据5
CSS代码:
.fixed-table {
width: 100%;
table-layout: fixed;
}
@media (max-width: 768px) { /* 在屏幕宽度小于等于768px时生效 */
.fixed-table th:first-child,
.fixed-table td:first-child {
position: sticky;
left: 0;
z-index: 1;
background-color: white;
}
}
在上述代码中,我们使用了媒体查询@media (max-width: 768px)
来定义在屏幕宽度小于等于768px时的样式。.fixed-table th:first-child
和.fixed-table td:first-child
选择器用于选中表格的第一列表头和单元格。通过设置它们的position
属性为sticky
,left
属性为0
,z-index
属性为1
,和background-color
属性为white
,可以将第一列固定在表格的左侧。
这样,在屏幕宽度小于等于768px时,第一列将始终固定在左侧,而其他列会根据屏幕宽度自动适应位置。