HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列-前端开发

那么接下来我将为您详细讲解如何实现“HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列”。

那么接下来我将为您详细讲解如何实现“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修正了滚动列的显示问题。