那么接下来我将为您详细讲解如何实现“HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列”。
一、实现思路
-
将TABLE分为两个部分，左侧是固定的列，右侧是滚动的列。
-
固定列使用position: fixed进行固定，同时在其父元素（TABLE）上设置position: relative，保证固定列相对于父元素定位。
-
滚动列使用overflow: scroll实现滚动效果。
-
为了防止固定列的宽度不正确，需要在渲染前计算固定列的宽度，并将滚动列的宽度减去固定列的宽度。
-
为了保持TABLE的样式一致，在固定列中复制滚动列的表头，并隐藏滚动列的表头。
-
使用JS动态同步滚动列的位置，以及固定列的高度。
二、示例说明
示例一
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TABLE固定列示例一</title>
<style type="text/css">
table {
border-collapse: collapse;
width: 100%;
}
table th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
.fixed {
position: fixed;
left: 0;
top: 0;
background-color: #fff;
overflow: hidden;
}
.scroll {
overflow: auto;
width: 100%;
margin-left: 200px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>固定列1</th>
<th>固定列2</th>
<th>滚动列1</th>
<th>滚动列2</th>
<th>滚动列3</th>
<th>滚动列4</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fixed">固定列1</td>
<td class="fixed">固定列2</td>
<td>滚动列1</td>
<td>滚动列2</td>
<td>滚动列3</td>
<td>滚动列4</td>
</tr>
<tr>
<td class="fixed">固定列1</td>
<td class="fixed">固定列2</td>
<td>滚动列1</td>
<td>滚动列2</td>
<td>滚动列3</td>
<td>滚动列4</td>
</tr>
<!-- 继续添加更多行 -->
</tbody>
</table>
<script type="text/javascript">
// 计算固定列的宽度，并将滚动列宽度减去固定列宽度
window.onload = function() {
var ths = document.querySelectorAll('.fixed');
var scroll = document.querySelector('.scroll');
var scrollWidth = scroll.offsetWidth - ths.length * ths[0].offsetWidth;
scroll.style.width = scrollWidth + 'px';
};
// 动态同步固定列的高度和滚动列的位置
window.onscroll = function() {
var fixed = document.querySelectorAll('.fixed');
var scroll = document.querySelector('.scroll');
var distance = scroll.getBoundingClientRect().top;
for (var i = 0; i < fixed.length; i++) {
fixed[i].style.top = distance + 'px';
}
scroll.style.marginTop = -distance + 'px';
};
</script>
</body>
</html>
这个例子将TABLE分为固定列和滚动列两个部分，并通过CSS样式实现了固定列的固定，滚动列的滚动，以及TABLE的样式设置。同时，通过JS动态计算了固定列的宽度，并同步固定列的高度和滚动列的位置。
示例二
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TABLE固定列示例二</title>
<style type="text/css">
table {
border-collapse: collapse;
width: 100%;
}
table th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
.fixed {
position: fixed;
left: 0;
top: 0;
background-color: #fff;
z-index: 1;
}
.scroll {
overflow: auto;
width: 100%;
-webkit-overflow-scrolling: touch;
margin-left: 200px;
padding-left: 5px;
}
.scroll thead th {
background-color: #fff;
position: sticky;
top: 0;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>固定列1</th>
<th>固定列2</th>
<th>滚动列1</th>
<th>滚动列2</th>
<th>滚动列3</th>
<th>滚动列4</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fixed">固定列1</td>
<td class="fixed">固定列2</td>
<td>滚动列1</td>
<td>滚动列2</td>
<td>滚动列3</td>
<td>滚动列4</td>
</tr>
<tr>
<td class="fixed">固定列1</td>
<td class="fixed">固定列2</td>
<td>滚动列1</td>
<td>滚动列2</td>
<td>滚动列3</td>
<td>滚动列4</td>
</tr>
<!-- 继续添加更多行 -->
</tbody>
</table>
<script type="text/javascript">
// 动态同步滚动列的位置和固定列的高度
window.onscroll = function() {
var fixed = document.querySelectorAll('.fixed');
var scroll = document.querySelector('.scroll');
var distance = scroll.getBoundingClientRect().top;
for (var i = 0; i < fixed.length; i++) {
fixed[i].style.top = distance + 'px';
}
scroll.style.marginTop = -distance + 'px';
};
</script>
</body>
</html>
这个例子使用了CSS3的sticky属性，实现了在滚动时固定表头。同时，还加入了对移动端的支持，使用-webkit-overflow-scrolling: touch实现了更加流畅的滚动效果，并通过padding-left修正了滚动列的显示问题。
三、总结
本文详细讲解了如何实现“HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列”这一功能，并提供了两个示例进行说明。同学们可以根据自己的实际需要进行相应的修改和优化，以满足自己的需求。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列 - Python技术站
微信扫一扫 
支付宝扫一扫 