使 html 表在第一行和第一列固定的情况下可滚动
[英]Making html table scrollable with first row and column fixed
问题描述
I want to make my html table scrollable by fixing first row and column
我想通过修复第一行和第一列使我的 html 表可滚动
I have tried various answers in below mentioned stackoverflow questions but none of them gives correct results or they change my original css design我在下面提到的 stackoverflow 问题中尝试了各种答案，但没有一个给出正确的结果，或者它们改变了我原来的 css 设计
Freeze first row and first column of table 冻结表格的第一行和第一列
How can I lock the first row and first column of a table when scrolling, possibly using JavaScript and CSS? 如何在滚动时锁定表格的第一行和第一列，可能使用 JavaScript 和 CSS？
How can I acheive this by maintaing my original css design of table?如何通过维护我原来的 css 表设计来实现这一点？ I am new to css so I am unable to do this.我是 css 的新手，所以我无法做到这一点。
My HTML/CSS code:我的 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; }
<:DOCTYPE html> <html> <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'> <th span='col'>row1</th> <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'> <th span='col'>row2</th> <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'> <th span='col'>row3</th> <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'> <th span='col'>row4</th> <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'> <th span='col'>row5</th> <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'> <th span='col'>row6</th> <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'> <th span='col'>row7</th> <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'> <th span='col'>row8</th> <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'> <th span='col'>row9</th> <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'> <th span='col'>row10</th> <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='row11'> <th span='col'>row11</th> <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='row12'> <th span='col'>row12</th> <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='row13'> <th span='col'>row13</th> <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='row14'> <th span='col'>row14</th> <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='row15'> <th span='col'>row15</th> <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='row16'> <th span='col'>row16</th> <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='row17'> <th span='col'>row17</th> <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='row18'> <th span='col'>row18</th> <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='row19'> <th span='col'>row19</th> <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='row20'> <th span='col'>row20</th> <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='row21'> <th span='col'>row21</th> <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='row22'> <th span='col'>row22</th> <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='row23'> <th span='col'>row23</th> <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="row24"> <th span='col'>row24</th> <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='row25'> <th span='col'>row25</th> <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='row26'> <th span='col'>row26</th> <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='row27'> <th span='col'>row27</th> <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> </html>
1 个解决方案
解决方案1
0 已采纳 2020-04-12 08:12:57
You can do something like this(View in full screen for good visualization):您可以执行以下操作（全屏查看以获得良好的可视化效果）：
$(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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
具有固定标题和固定第一列的可滚动表 - Scrollable Table with fixed headers and fixed first column
使表格的第一列固定在水平滚动上 - Making the first column of a table fixed on horizontal scroll
用固定列构建可滚动表 - Build scrollable table with fixed column
具有固定列的可滚动表，固定大小相等 - Scrollable table with fixed column fixed with equal size
具有顶行和左列冻结的可滚动HTML表 - Scrollable HTML table with top row and left column frozen
HTML5 Canvas：具有固定的第一行和第一列的绘制矩阵 - HTML5 Canvas: Draw matrix with fixed first row and first column
水平滚动时，使表格中的第一列固定 - Making the first column in a table fixed when scrolling horizontally
react-native-table-component 冻结可滚动表中的第一列和第一行 - react-native-table-component freeze first column & first row in scrollable table
HTML 表格固定第一列，单元格文本不在粘性列后面 - HTML Table fixed first column, cell text is not behind sticky column
HTML半表可滚动，而其他半表则固定 - HTML half table is scrollable while others is fixed
相关标签