說明
利用粘性定位實現
列固定
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>