说明
利用粘性定位实现
列固定
td.fixed {position: sticky;left: 0;z-index: 5;/* 最好指定背景,否则滑动时会显示下面的列 */background-color: #f8f9fa;
}
表头固定
<head><style>.table-container {position: relative;display: flex;overflow: hidden;/* 减去头部导航的高度 */height: calc(100vh - 70px);}.scrollable-content {flex: 1;overflow: auto;-webkit-overflow-scrolling: touch;}th {position: sticky;top: 0;z-index: 10;}th:first-child {position: sticky;left: 0;/* 比表头和固定列都高 */z-index: 15;background: #f8f9fa;}</style>
</head>
<body><div class="table-container"><div class="scrollable-content"><table><!-- table内容 --></table></div></div>
<body>