猿问

使 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
浏览 161回答 1
1回答

子衿沉夜

您可以执行以下操作（全屏查看以获得良好的可视化效果）：$(document).ready(function() {&nbsp; $('tbody').scroll(function(e) { //detect a scroll event on the tbody&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; $('thead').css("left", -$("tbody").scrollLeft()); //fix the thead relative to the body scrolling&nbsp; &nbsp; $('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first cell of the header&nbsp; &nbsp; $('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first column of tdbody&nbsp; });});table {&nbsp; position: relative;&nbsp; width: 900px;&nbsp; background-color: #aaa;&nbsp; overflow: hidden;&nbsp; border-collapse: collapse;}/*thead*/thead {&nbsp; position: relative;&nbsp; display: block;&nbsp; width: 900px;&nbsp; overflow: visible;}thead th {&nbsp; background-color: #99a;&nbsp; min-width: 120px;&nbsp; height: 32px;&nbsp; border: 1px solid #222;}thead th:nth-child(1) {&nbsp; /*first cell in the header*/&nbsp; position: relative;&nbsp; display: block;&nbsp; /*seperates the first cell in the header from the header*/&nbsp; background-color: #88b;}/*tbody*/tbody {&nbsp; position: relative;&nbsp; display: block;&nbsp; width: 900px;&nbsp; height: 239px;&nbsp; overflow: scroll;}tbody td {&nbsp; background-color: #bbc;&nbsp; min-width: 120px;&nbsp; border: 1px solid #222;}tbody tr td:nth-child(1) {&nbsp; position: relative;&nbsp; display: block;&nbsp; height: 40px;&nbsp; background-color: #99a;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><head>&nbsp; <title>sample</title>&nbsp; <meta charset="utf-8" http-equiv="refresh" content="300">&nbsp; <link href="https://fonts.googleapis.com/css?family=Lato&display=block" rel="stylesheet">&nbsp; <link rel="stylesheet" type="text/css" href="css/style.css"></head><body>&nbsp; <div class="container">&nbsp; &nbsp; <table class="checkBox">&nbsp; &nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Name</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>user1</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>user2</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>user3</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>user4</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>user5</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>user6</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>user7</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>user8</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>user9</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>user10</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>user11</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>user12</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>user13</th>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; </thead>&nbsp; &nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; &nbsp; <tr id='row1'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>row1</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user1'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user2'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user3'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user4'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user5'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user6'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user7'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user8'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user9'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user10'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user11'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user12'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user13'></td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <tr id='row2'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>row2</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user1'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user2'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user3'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user4'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user5'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user6'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user7'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user8'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user9'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user10'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user11'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user12'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user13'></td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <tr id='row3'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>row3</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user1'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user2'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user3'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user4'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user5'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user6'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user7'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user8'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user9'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user10'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user11'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user12'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user13'></td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <tr id='row4'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>row4</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user1'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user2'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user3'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user4'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user5'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user6'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user7'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user8'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user9'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user10'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user11'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user12'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user13'></td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <tr id='row5'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>row5</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user1'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user2'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user3'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user4'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user5'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user6'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user7'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user8'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user9'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user10'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user11'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user12'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user13'></td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <tr id='row6'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>row6</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user1'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user2'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user3'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user4'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user5'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user6'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user7'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user8'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user9'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user10'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user11'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user12'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user13'></td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <tr id='row7'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>row7</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user1'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user2'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user3'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user4'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user5'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user6'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user7'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user8'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user9'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user10'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user11'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user12'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user13'></td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <tr id='row8'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>row8</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user1'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user2'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user3'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user4'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user5'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user6'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user7'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user8'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user9'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user10'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user11'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user12'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user13'></td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <tr id='row9'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>row9</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user1'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user2'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user3'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user4'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user5'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user6'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user7'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user8'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user9'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user10'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user11'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user12'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user13'></td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <tr id='row10'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>row10</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user1'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user2'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user3'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user4'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user5'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user6'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user7'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user8'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user9'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user10'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user11'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user12'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id='user13'></td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; </tbody>&nbsp; &nbsp; </table>&nbsp; </div></body>
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答