使表头固定，tbody可滚动(x和y)
使表头固定，tbody可滚动(x和y)
提问于 2019-08-26 03:57:40
我试图固定标题(在顶部和左边)，并允许其他行滚动。我找到了很多像这里这样固定头的可滚动的tbody表。
另外，当我试图实现这段代码时，我的表可能会因为宽度更长而损坏。
但是，我无法找到滚动有关x轴键击标题固定在同一时间。
如果有任何建议来处理这个问题，我将不胜感激。
我的主要要求：-顶部标题应固定时，滚动垂直-左标题应固定时，水平滚动。
th{
background: #c3c3c3
}
.table-fixed {
width: 100%;
background-color: #f3f3f3;
}
.table-fixed tbody {
height: 200px;
overflow-y: auto;
width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
display: block;
}
.table-fixed tbody td {
float: left;
}
.table-fixed thead tr th {
float: left;
background-color: #f39c12;
border-color: #e67e22;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="tableBox">
<table class="table table-bordered table-fixed text-center header-fixed">
<thead>
<tr class="fixed-row">
<th></th>
<th>01</th>
<th>02</th>
<th>03</th>
<th>04</th>
<th>05</th>
<th>06</th>
<th>07</th>
<th>08</th>
<th>09</th>
<th>10</th>
<th>11</th>
<th>12</th>
<th>13</th>
<th>14</th>
<th>15</th>
<th>16</th>
<th>17</th>
<th>18</th>
<th>19</th>
<th>20</th>
<th>21</th>
<th>22</th>
<th>23</th>
<th>24</th>
<th>25</th>
<th>26</th>
<th>27</th>
<th>28</th>
<th>29</th>
<th>30</th>
<th>31</th>
<th>32</th>
<th>33</th>
<th>34</th>
<th>35</th>
<th>36</th>
<th>37</th>
<th>38</th>
<th>39</th>
<th>40</th>
<th>41</th>
<th>42</th>
</tr>
</thead>
<tbody>
<tr>
<th>0</th>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<th>1</th>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
95
</td>
<td>
</td>
<td>
85
</td>
<td>
333
</td>
<td>
530
</td>
<td>
<span>-603</span>
</td>
<td>
440
</td>
<td>
<span>-570</span>
</td>
<td>
430
</td>
<td>
<span>-603</span>
</td>
<td>
255
</td>
<td>
<span>-595</span>
</td>
<td>
605
</td>
<td>
<span>-603</span>
</td>
<td>
245
</td>
<td>
<span>-595</span>
</td>
<td>
305
</td>
<td>
<span>-115</span>
</td>
<td>
430
</td>
<td> 45 </td>
<td>
</td>
<td>
395
</td>
<td>
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
270
</td>
<td>
1051
</td>
<td>
220
</td>
<td>
312
</td>
<td>
45
</td>
<td>
180
</td>
<td>
45
</td>
<td>
978
</td>
<td>
<span>-99</span>
</td>
</tr>
<tr>
<th>2</th>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
95
</td>
<td>
</td>
<td>
85
</td>
<td>
333
</td>
<td>
530
</td>
<td>
<span>-603</span>
</td>
<td>
440
</td>
<td>
<span>-570</span>
</td>
<td>
430
</td>
<td>
<span>-603</span>
</td>
<td>
255
</td>
<td>
<span>-595</span>
</td>
<td>
605
</td>
<td>
<span>-603</span>
</td>
<td>
245
</td>
<td>
<span>-595</span>
</td>
<td>
305
</td>
<td>
<span>-115</span>
</td>
<td>
430
</td>
<td> 45 </td>
<td>
</td>
<td>
395
</td>
<td>
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
270
</td>
<td>
1051
</td>
<td>
220
</td>
<td>
312
</td>
<td>
45
</td>
<td>
180
</td>
<td>
45
</td>
<td>
978
</td>
<td>
<span>-99</span>
</td>
</tr>
<tr>
<th>4</th>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
95
</td>
<td>
</td>
<td>
85
</td>
<td>
333
</td>
<td>
530
</td>
<td>
<span>-603</span>
</td>
<td>
440
</td>
<td>
<span>-570</span>
</td>
<td>
430
</td>
<td>
<span>-603</span>
</td>
<td>
255
</td>
<td>
<span>-595</span>
</td>
<td>
605
</td>
<td>
<span>-603</span>
</td>
<td>
245
</td>
<td>
<span>-595</span>
</td>
<td>
305
</td>
<td>
<span>-115</span>
</td>
<td>
430
</td>
<td> 45 </td>
<td>
</td>
<td>
395
</td>
<td>
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
270
</td>
<td>
1051
</td>
<td>
220
</td>
<td>
312
</td>
<td>
45
</td>
<td>
180
</td>
<td>
45
</td>
<td>
978
</td>
<td>
<span>-99</span>
</td>
</tr>
<tr>
<th>5</th>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
95
</td>
<td>
</td>
<td>
85
</td>
<td>
333
</td>
<td>
530
</td>
<td>
<span>-603</span>
</td>
<td>
440
</td>
<td>
<span>-570</span>
</td>
<td>
430
</td>
<td>
<span>-603</span>
</td>
<td>
255
</td>
<td>
<span>-595</span>
</td>
<td>
605
</td>
<td>
<span>-603</span>
</td>
<td>
245
</td>
<td>
<span>-595</span>
</td>
<td>
305
</td>
<td>
<span>-115</span>
</td>
<td>
430
</td>
<td> 45 </td>
<td>
</td>
<td>
395
</td>
<td>
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
270
</td>
<td>
1051
</td>
<td>
220
</td>
<td>
312
</td>
<td>
45
</td>
<td>
180
</td>
<td>
45
</td>
<td>
978
</td>
<td>
<span>-99</span>
</td>
</tr>
<tr>
<th>6</th>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
95
</td>
<td>
</td>
<td>
85
</td>
<td>
333
</td>
<td>
530
</td>
<td>
<span>-603</span>
</td>
<td>
440
</td>
<td>
<span>-570</span>
</td>
<td>
430
</td>
<td>
<span>-603</span>
</td>
<td>
255
</td>
<td>
<span>-595</span>
</td>
<td>
605
</td>
<td>
<span>-603</span>
</td>
<td>
245
</td>
<td>
<span>-595</span>
</td>
<td>
305
</td>
<td>
<span>-115</span>
</td>
<td>
430
</td>
<td> 45 </td>
<td>
</td>
<td>
395
</td>
<td>
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
270
</td>
<td>
1051
</td>
<td>
220
</td>
<td>
312
</td>
<td>
45
</td>
<td>
180
</td>
<td>
45
</td>
<td>
978
</td>
<td>
<span>-99</span>
</td>
</tr>
<tr>
<th>7</th>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
95
</td>
<td>
</td>
<td>
85
</td>
<td>
333
</td>
<td>
530
</td>
<td>
<span>-603</span>
</td>
<td>
440
</td>
<td>
<span>-570</span>
</td>
<td>
430
</td>
<td>
<span>-603</span>
</td>
<td>
255
</td>
<td>
<span>-595</span>
</td>
<td>
605
</td>
<td>
<span>-603</span>
</td>
<td>
245
</td>
<td>
<span>-595</span>
</td>
<td>
305
</td>
<td>
<span>-115</span>
</td>
<td>
430
</td>
<td> 45 </td>
<td>
</td>
<td>
395
</td>
<td>
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
270
</td>
<td>
1051
</td>
<td>
220
</td>
<td>
312
</td>
<td>
45
</td>
<td>
180
</td>
<td>
45
</td>
<td>
978
</td>
<td>
<span>-99</span>
</td>
</tr>
<tr>
<th>8</th>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
95
</td>
<td>
</td>
<td>
85
</td>
<td>
333
</td>
<td>
530
</td>
<td>
<span>-603</span>
</td>
<td>
440
</td>
<td>
<span>-570</span>
</td>
<td>
430
</td>
<td>
<span>-603</span>
</td>
<td>
255
</td>
<td>
<span>-595</span>
</td>
<td>
605
</td>
<td>
<span>-603</span>
</td>
<td>
245
</td>
<td>
<span>-595</span>
</td>
<td>
305
</td>
<td>
<span>-115</span>
</td>
<td>
430
</td>
<td> 45 </td>
<td>
</td>
<td>
395
</td>
<td>
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
270
</td>
<td>
1051
</td>
<td>
220
</td>
<td>
312
</td>
<td>
45
</td>
<td>
180
</td>
<td>
45
</td>
<td>
978
</td>
<td>
<span>-99</span>
</td>
</tr>
</tbody>
</table>
</div>
如果您更喜欢使用codepen：Codepen链接
回答 1
Stack Overflow用户
发布于 2019-08-26 04:46:08
$(function(){
$("#headerFixed").tableHeadFixer({"left" : 1});
})th{
background: #c3c3c3
}
#tableBox {
max-height: 150px;
}
#headerFixed {
width: 100%;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://www.jqueryscript.net/demo/jQuery-Plugin-For-Fixed-Table-Header-Footer-Columns-TableHeadFixer/tableHeadFixer.js"></script>
<div class="tableBox">
<table id="headerFixed" class="table table-bordered table-fixed text-center header-fixed">
<thead>
<tr class="fixed-row">
<th></th>
<th>01</th>
<th>02</th>
<th>03</th>
<th>04</th>
<th>05</th>
<th>06</th>
<th>07</th>
<th>08</th>
<th>09</th>
<th>10</th>
<th>11</th>
<th>12</th>
<th>13</th>
<th>14</th>
<th>15</th>
<th>16</th>
<th>17</th>
<th>18</th>
<th>19</th>
<th>20</th>
<th>21</th>
<th>22</th>
<th>23</th>
<th>24</th>
<th>25</th>
<th>26</th>
<th>27</th>
<th>28</th>
<th>29</th>
<th>30</th>
<th>31</th>
<th>32</th>
<th>33</th>
<th>34</th>
<th>35</th>
<th>36</th>
<th>37</th>
<th>38</th>
<th>39</th>
<th>40</th>
<th>41</th>
<th>42</th>
</tr>
</thead>
<tbody>
<tr>
<th>0</th>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<th>1</th>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
95
</td>
<td>
</td>
<td>
85
</td>
<td>
333
</td>
<td>
530
</td>
<td>
<span>-603</span>
</td>
<td>
440
</td>
<td>
<span>-570</span>
</td>
<td>
430
</td>
<td>
<span>-603</span>
</td>
<td>
255
</td>
<td>
<span>-595</span>
</td>
<td>
605
</td>
<td>
<span>-603</span>
</td>
<td>
245
</td>
<td>
<span>-595</span>
</td>
<td>
305
</td>
<td>
<span>-115</span>
</td>
<td>
430
</td>
<td> 45 </td>
<td>
</td>
<td>
395
</td>
<td>
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
270
</td>
<td>
1051
</td>
<td>
220
</td>
<td>
312
</td>
<td>
45
</td>
<td>
180
</td>
<td>
45
</td>
<td>
978
</td>
<td>
<span>-99</span>
</td>
</tr>
<tr>
<th>2</th>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
95
</td>
<td>
</td>
<td>
85
</td>
<td>
333
</td>
<td>
530
</td>
<td>
<span>-603</span>
</td>
<td>
440
</td>
<td>
<span>-570</span>
</td>
<td>
430
</td>
<td>
<span>-603</span>
</td>
<td>
255
</td>
<td>
<span>-595</span>
</td>
<td>
605
</td>
<td>
<span>-603</span>
</td>
<td>
245
</td>
<td>
<span>-595</span>
</td>
<td>
305
</td>
<td>
<span>-115</span>
</td>
<td>
430
</td>
<td> 45 </td>
<td>
</td>
<td>
395
</td>
<td>
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
270
</td>
<td>
1051
</td>
<td>
220
</td>
<td>
312
</td>
<td>
45
</td>
<td>
180
</td>
<td>
45
</td>
<td>
978
</td>
<td>
<span>-99</span>
</td>
</tr>
<tr>
<th>4</th>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
95
</td>
<td>
</td>
<td>
85
</td>
<td>
333
</td>
<td>
530
</td>
<td>
<span>-603</span>
</td>
<td>
440
</td>
<td>
<span>-570</span>
</td>
<td>
430
</td>
<td>
<span>-603</span>
</td>
<td>
255
</td>
<td>
<span>-595</span>
</td>
<td>
605
</td>
<td>
<span>-603</span>
</td>
<td>
245
</td>
<td>
<span>-595</span>
</td>
<td>
305
</td>
<td>
<span>-115</span>
</td>
<td>
430
</td>
<td> 45 </td>
<td>
</td>
<td>
395
</td>
<td>
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
270
</td>
<td>
1051
</td>
<td>
220
</td>
<td>
312
</td>
<td>
45
</td>
<td>
180
</td>
<td>
45
</td>
<td>
978
</td>
<td>
<span>-99</span>
</td>
</tr>
<tr>
<th>5</th>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
95
</td>
<td>
</td>
<td>
85
</td>
<td>
333
</td>
<td>
530
</td>
<td>
<span>-603</span>
</td>
<td>
440
</td>
<td>
<span>-570</span>
</td>
<td>
430
</td>
<td>
<span>-603</span>
</td>
<td>
255
</td>
<td>
<span>-595</span>
</td>
<td>
605
</td>
<td>
<span>-603</span>
</td>
<td>
245
</td>
<td>
<span>-595</span>
</td>
<td>
305
</td>
<td>
<span>-115</span>
</td>
<td>
430
</td>
<td> 45 </td>
<td>
</td>
<td>
395
</td>
<td>
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
270
</td>
<td>
1051
</td>
<td>
220
</td>
<td>
312
</td>
<td>
45
</td>
<td>
180
</td>
<td>
45
</td>
<td>
978
</td>
<td>
<span>-99</span>
</td>
</tr>
<tr>
<th>6</th>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
95
</td>
<td>
</td>
<td>
85
</td>
<td>
333
</td>
<td>
530
</td>
<td>
<span>-603</span>
</td>
<td>
440
</td>
<td>
<span>-570</span>
</td>
<td>
430
</td>
<td>
<span>-603</span>
</td>
<td>
255
</td>
<td>
<span>-595</span>
</td>
<td>
605
</td>
<td>
<span>-603</span>
</td>
<td>
245
</td>
<td>
<span>-595</span>
</td>
<td>
305
</td>
<td>
<span>-115</span>
</td>
<td>
430
</td>
<td> 45 </td>
<td>
</td>
<td>
395
</td>
<td>
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
270
</td>
<td>
1051
</td>
<td>
220
</td>
<td>
312
</td>
<td>
45
</td>
<td>
180
</td>
<td>
45
</td>
<td>
978
</td>
<td>
<span>-99</span>
</td>
</tr>
<tr>
<th>7</th>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
95
</td>
<td>
</td>
<td>
85
</td>
<td>
333
</td>
<td>
530
</td>
<td>
<span>-603</span>
</td>
<td>
440
</td>
<td>
<span>-570</span>
</td>
<td>
430
</td>
<td>
<span>-603</span>
</td>
<td>
255
</td>
<td>
<span>-595</span>
</td>
<td>
605
</td>
<td>
<span>-603</span>
</td>
<td>
245
</td>
<td>
<span>-595</span>
</td>
<td>
305
</td>
<td>
<span>-115</span>
</td>
<td>
430
</td>
<td> 45 </td>
<td>
</td>
<td>
395
</td>
<td>
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
270
</td>
<td>
1051
</td>
<td>
220
</td>
<td>
312
</td>
<td>
45
</td>
<td>
180
</td>
<td>
45
</td>
<td>
978
</td>
<td>
<span>-99</span>
</td>
</tr>
<tr>
<th>8</th>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
95
</td>
<td>
</td>
<td>
85
</td>
<td>
333
</td>
<td>
530
</td>
<td>
<span>-603</span>
</td>
<td>
440
</td>
<td>
<span>-570</span>
</td>
<td>
430
</td>
<td>
<span>-603</span>
</td>
<td>
255
</td>
<td>
<span>-595</span>
</td>
<td>
605
</td>
<td>
<span>-603</span>
</td>
<td>
245
</td>
<td>
<span>-595</span>
</td>
<td>
305
</td>
<td>
<span>-115</span>
</td>
<td>
430
</td>
<td> 45 </td>
<td>
</td>
<td>
395
</td>
<td>
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
270
</td>
<td>
1051
</td>
<td>
220
</td>
<td>
312
</td>
<td>
45
</td>
<td>
180
</td>
<td>
45
</td>
<td>
978
</td>
<td>
<span>-99</span>
</td>
</tr>
</tbody>
</table>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57651590
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号