使 html 表格可滚动，第一行和第一列固定
我想通过修复第一行和第一列来使我的 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;
}
慕桂英3389331浏览 160回答 1
1回答
-
子衿沉夜
您可以执行以下操作（全屏查看以获得良好的可视化效果）：$(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;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><head> <title>sample</title> <meta charset="utf-8" http-equiv="refresh" content="300"> <link href="https://fonts.googleapis.com/css?family=Lato&display=block" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/style.css"></head><body> <div class="container"> <table class="checkBox"> <thead> <tr> <th>Name</th> <th>user1</th> <th>user2</th> <th>user3</th> <th>user4</th> <th>user5</th> <th>user6</th> <th>user7</th> <th>user8</th> <th>user9</th> <th>user10</th> <th>user11</th> <th>user12</th> <th>user13</th> </tr> </thead> <tbody> <tr id='row1'> <td>row1</td> <td id='user1'></td> <td id='user2'></td> <td id='user3'></td> <td id='user4'></td> <td id='user5'></td> <td id='user6'></td> <td id='user7'></td> <td id='user8'></td> <td id='user9'></td> <td id='user10'></td> <td id='user11'></td> <td id='user12'></td> <td id='user13'></td> </tr> <tr id='row2'> <td>row2</td> <td id='user1'></td> <td id='user2'></td> <td id='user3'></td> <td id='user4'></td> <td id='user5'></td> <td id='user6'></td> <td id='user7'></td> <td id='user8'></td> <td id='user9'></td> <td id='user10'></td> <td id='user11'></td> <td id='user12'></td> <td id='user13'></td> </tr> <tr id='row3'> <td>row3</td> <td id='user1'></td> <td id='user2'></td> <td id='user3'></td> <td id='user4'></td> <td id='user5'></td> <td id='user6'></td> <td id='user7'></td> <td id='user8'></td> <td id='user9'></td> <td id='user10'></td> <td id='user11'></td> <td id='user12'></td> <td id='user13'></td> </tr> <tr id='row4'> <td>row4</td> <td id='user1'></td> <td id='user2'></td> <td id='user3'></td> <td id='user4'></td> <td id='user5'></td> <td id='user6'></td> <td id='user7'></td> <td id='user8'></td> <td id='user9'></td> <td id='user10'></td> <td id='user11'></td> <td id='user12'></td> <td id='user13'></td> </tr> <tr id='row5'> <td>row5</td> <td id='user1'></td> <td id='user2'></td> <td id='user3'></td> <td id='user4'></td> <td id='user5'></td> <td id='user6'></td> <td id='user7'></td> <td id='user8'></td> <td id='user9'></td> <td id='user10'></td> <td id='user11'></td> <td id='user12'></td> <td id='user13'></td> </tr> <tr id='row6'> <td>row6</td> <td id='user1'></td> <td id='user2'></td> <td id='user3'></td> <td id='user4'></td> <td id='user5'></td> <td id='user6'></td> <td id='user7'></td> <td id='user8'></td> <td id='user9'></td> <td id='user10'></td> <td id='user11'></td> <td id='user12'></td> <td id='user13'></td> </tr> <tr id='row7'> <td>row7</td> <td id='user1'></td> <td id='user2'></td> <td id='user3'></td> <td id='user4'></td> <td id='user5'></td> <td id='user6'></td> <td id='user7'></td> <td id='user8'></td> <td id='user9'></td> <td id='user10'></td> <td id='user11'></td> <td id='user12'></td> <td id='user13'></td> </tr> <tr id='row8'> <td>row8</td> <td id='user1'></td> <td id='user2'></td> <td id='user3'></td> <td id='user4'></td> <td id='user5'></td> <td id='user6'></td> <td id='user7'></td> <td id='user8'></td> <td id='user9'></td> <td id='user10'></td> <td id='user11'></td> <td id='user12'></td> <td id='user13'></td> </tr> <tr id='row9'> <td>row9</td> <td id='user1'></td> <td id='user2'></td> <td id='user3'></td> <td id='user4'></td> <td id='user5'></td> <td id='user6'></td> <td id='user7'></td> <td id='user8'></td> <td id='user9'></td> <td id='user10'></td> <td id='user11'></td> <td id='user12'></td> <td id='user13'></td> </tr> <tr id='row10'> <td>row10</td> <td id='user1'></td> <td id='user2'></td> <td id='user3'></td> <td id='user4'></td> <td id='user5'></td> <td id='user6'></td> <td id='user7'></td> <td id='user8'></td> <td id='user9'></td> <td id='user10'></td> <td id='user11'></td> <td id='user12'></td> <td id='user13'></td> </tr> </tbody> </table> </div></body>
随时随地看视频慕课网APP
相关分类
Html5