table固定表头其他行列可拖动

最新推荐文章于 2024-06-25 16:31:06 发布

sinat_38560284

最新推荐文章于 2024-06-25 16:31:06 发布

阅读量361

点赞数

文章标签： CSS布局 JavaScript滚动同步表格滚动条前端开发

本文链接：https://blog.csdn.net/sinat_38560284/article/details/118608187

版权

这篇博客介绍了如何使用CSS和JavaScript实现一个具有两列的表格布局，其中第一列的滚动条被隐藏，而内容区域可以垂直滚动。通过监听滚动事件，实现了两个表格滚动条的同步，确保了内容的同步显示。此外，还通过JS动态设置了表格单元格的高度，以保持左右两侧表格的高度一致，提供良好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


.report-table {
    overflow-x: auto; 
    max-width: 600px;
}

.header-table {
    overflow: hidden; /* 隐藏第一列滚动条*/
    max-width: 300px;
}
.table-body {
    overflow-y: auto;
    max-height: 400px;
}
.d-block {
	display: block;
}

分为第一列和其他列两个表：


        <div class="d-flex">
            <table class="table text-center header-table">
                <thead class="d-block">
                    <tr>
                        <th>第一行第一列</th>
                    </tr>
                </thead>
                <!-- 竖表头（固定） -->
                <tbody id="tableHeader" class="d-block table-body">
                	<tr>
                		<td>第一列第二行</td>
                		<td>第一列第二行</td>
                		<td>第一列第三行</td>
                		<td>……</td>
               		</tr>
                </tbody>
            </table>

            <div class="report-table">
                <table class="table text-center">
	                <!-- 横表头（固定） -->
                    <thead class="d-block">
                    	<th>第一行第二列</th>
                    	<th>第一行第二列</th>
                    	<th>第一行第三列</th>
                    	<th>……</th>
                    </thead>
                    <!-- 表内容（可拖动） -->
                    <tbody id="tableContent" class="d-block table-body">
                    	<tr>
	                    	<td>第二行第二列</td>
	                    	<td>第二行第二列</td>
	                    	<td>第二行第三列</td>
	                    	<td>……</td>
                		</tr>
                		<tr>
	                    	<td>第二行第二列</td>
	                    	<td>第二行第二列</td>
	                    	<td>第二行第三列</td>
	                    	<td>……</td>
                    	</tr>
                    </tbody>
                </table>
            </div>
        </div>

垂直方向同步滚动 & 左右内容height保持一致：


    window.onload=function(){
        let content = document.getElementById('tableContent')
        let header = document.getElementById('tableHeader')
        let contentChanged = true
        let headerChanged = true

        if (content != null && header != null) {
            content.onscroll = () => {
              if (contentChanged) {
                header.scrollTop = content.scrollTop / (content.scrollHeight - content.clientHeight) * (header.scrollHeight - header.clientHeight)
                headerChanged = false
              } else {
                contentChanged = true
              }
            }
            header.onscroll = () => {
              if (headerChanged) {
                content.scrollTop = header.scrollTop / (header.scrollHeight - header.clientHeight) * (content.scrollHeight - content.clientHeight)
                contentChanged = false
              } else {
                headerChanged = true
              }
            }
            //设置右边cell的height与左边一致，避免左边内容换行导致高度错开
            var rowNumber = header.rows.length;
            for (var i = 0; i < rowNumber; i++) {
                content.rows[i].cells[0].height = header.rows[i].cells[0].offsetHeight;
            }
    }