我有一个表，上面一行和左边一列都是粘性标题，结构像
<table>
<thead>
<tr>
<th>0</th>
<th>1</th>
...
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>content</td>
...
</tr>
<tr>
<th>2</th>
<td>content</td>
...
</tr>
...
</tbody>
</table>
问题是：如何使滚动条只显示在td区域内？不在左列，不在标题行。为了使滚动条不显示在表体之外，我从表的父级删除了overflow：scroll，但在这种情况下，表刚刚开始获得所需的所有空间(因此它超出了其父级(，因此没有什么可滚动的，因此我无法查看tbody上的"overflow：滚动"是否至少对表头有效。
提前感谢！这里太堵了。
您需要指定container:的宽度和高度
thead tbody {
display: block;
}
#sheet-table {
border-collapse: separate;
max-width: 100vw;
max-height: 100vh;
}
#root-cell {
background-color: grey;
z-index: 3;
}
#root-cell :before {
border-left: 1px solid black;
}
.cell {
border: 1px solid black;
min-width: 100px;
height: 50px;
vertical-align: middle;
text-align: center;
}
.column-header {
position: sticky;
top: 0;
z-index: 2;
border-top: 1px solid black;
}
.row-header {
position: sticky;
left: 0;
z-index: 1;
border-left: 1px solid black;
}
.row-header, .column-header {
color: black;
background-color: grey;
}
.container {
width: 80%;
height: 500px;
overflow: auto
}<div class="container">
<table id="sheet-table">
<thead>
<tr id="row-header header">
<th id="root-cell" class="cell row-header column-header"></th>
<th class="column-header cell"> 1 </th>
<th class="column-header cell"> 2 </th>
<th class="column-header cell"> 3 </th>
<th class="column-header cell"> 4 </th>
<th class="column-header cell"> 5 </th>
<th class="column-header cell"> 6 </th>
<th class="column-header cell"> 7 </th>
<th class="column-header cell"> 8 </th>
<th class="column-header cell"> 9 </th>
<th class="column-header cell"> 10 </th>
<th class="column-header cell"> 11 </th>
<th class="column-header cell"> 12 </th>
<th class="column-header cell"> 13 </th>
<th class="column-header cell"> 14 </th>
<th class="column-header cell"> 15 </th>
<th class="column-header cell"> 16 </th>
<th class="column-header cell"> 17 </th>
<th class="column-header cell"> 18 </th>
<th class="column-header cell"> 19 </th>
</tr>
</thead>
<tbody>
<tr>
<th class="row-header cell">1</th>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
<tr>
<th class="row-header cell">2</th>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
<tr>
<th class="row-header cell">3</th>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
<tr>
<th class="row-header cell">4</th>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
<tr>
<th class="row-header cell">5</th>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
<tr>
<th class="row-header cell">6</th>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
<tr>
<th class="row-header cell">7</th>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
<tr>
<th class="row-header cell">8</th>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
<tr>
<th class="row-header cell">9</th>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
<tr>
<th class="row-header cell">10</th>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
</tbody>
</table>
</div>