首页猿问使 html...

使 html 表格可滚动，第一行和第一列固定

Html5

慕桂英3389331 2023-12-11 10:23:28

我想通过修复第一行和第一列来使我的 html 表格可滚动我在下面提到的 stackoverflow 问题中尝试了各种答案，但没有一个给出正确的结果，或者它们改变了我原来的 css 设计冻结表格的第一行和第一列如何在滚动时锁定表格的第一行和第一列（可能使用 JavaScript 和 CSS）？我怎样才能通过保持我原来的表格 CSS 设计来实现这一目标？我是 css 新手，所以我无法做到这一点。我的 HTML/CSS 代码：html { line-height: 1.5; font-family: Lato, sans-serif; font-weight: normal; font-size: 14px; color: #212121;}body { background: #fafafa; margin: 0px;}html,body,{ position: fixed; top: 0; bottom: 0; left: 0; right: 0;}.container { max-width: 1280px; width: 100%; position: relative; margin: 0 auto;}.checkBox { width: 100%; margin: 12px 0px; border: solid 1px #dcdcdc; border-radius: 4px;}.checkBox thead tr { background-color: #ddd;}.checkBox thead tr th { text-transform: uppercase; padding: 8px 12px; font-size: 12px; font-weight: bold; letter-spacing: 1px; text-align: left; color: #7a7a7a;}.checkBox tbody tr th { text-align: left; padding: 4px 12px;}.checkBox tbody tr { background: #fff;}.checkBox tbody tr:nth-child(even) { background: #f6f6f6;}.checkBox tbody tr td { padding: 0 8px;}

查看完整描述

1 回答

子衿沉夜

TA贡献1828条经验获得超3个赞

您可以执行以下操作（全屏查看以获得良好的可视化效果）：

$(document).ready(function() {

$('tbody').scroll(function(e) { //detect a scroll event on the tbody

$('thead').css("left", -$("tbody").scrollLeft()); //fix the thead relative to the body scrolling

$('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first cell of the header

$('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first column of tdbody

});

table {

position: relative;

width: 900px;

background-color: #aaa;

overflow: hidden;

border-collapse: collapse;

}

/*thead*/

thead {

position: relative;

display: block;

width: 900px;

overflow: visible;

}

thead th {

background-color: #99a;

min-width: 120px;

height: 32px;

border: 1px solid #222;

}

thead th:nth-child(1) {

/*first cell in the header*/

position: relative;

display: block;

/*seperates the first cell in the header from the header*/

background-color: #88b;

}

/*tbody*/

tbody {

position: relative;

display: block;

width: 900px;

height: 239px;

overflow: scroll;

}

tbody td {

background-color: #bbc;

min-width: 120px;

border: 1px solid #222;

}

tbody tr td:nth-child(1) {

position: relative;

display: block;

height: 40px;

background-color: #99a;

}

<head>

<title>sample</title>

</head>

<body>

<thead>

<tr>

</tr>

</thead>

<tbody>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tbody>

</table>

</div>

</body>

反对回复 2023-12-11

1 回答
0 关注
149 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

使 html 表格可滚动，第一行和第一列固定

使 html 表格可滚动，第一行和第一列固定

1 回答

添加回答