【发布时间】：2019-12-30 06:31:57
【问题描述】：
我正在尝试固定标题（顶部和左侧）并允许其他行滚动。我发现了很多可滚动的 tbody 表格，带有固定的标题，例如 here。
另外，当我尝试实现此代码时，我的桌子坏了可能是因为宽度较长。
但是，我找不到能够同时固定 x 轴 keekping 标题的滚动。
如果有任何解决此问题的建议，我将不胜感激。
我的主要要求： - 垂直滚动时顶部标题应固定 - 水平滚动时左标题应固定。
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 link
【问题讨论】：
-
你试过这个jsfiddle.net/RMarsh/bzuasLcz/3 吗？
-
左边的标题只是在晃动，难道我们不能让它稳定吗？如果我们使用纯 CSS 可能不会发生？
-
添加你的css .fixed-row{position:fixed;}