我正在try 创建一个具有粘性页眉和页脚表格，并在卷轴之间创建一个tBody，重要的是，滚动条必须只在tBody上，而不是在页眉或页脚上(这就是设计所要求的).
我try 了以下几种方法:
-
我的第一个try 是在桌子周围添加一个包装纸，并在上面放上高度和溢出量.除了滚动条扩展到页眉和页脚之外，这基本上是有效的，这是我不想要的.
-
我见过一些人使用
display:grid，并在thead、tbody和tr上放置了display:contents，以便th和tds成为网格元素.我稍微修改了一下，以便使用子网格.我让父网格的子网格也与grid-template-columns:subgrid一起网格，这似乎是可行的，除了页脚被溢出的主体向下推. -
我见过一些人说要做
display:block人，但我做不到，它只会把整个人推到第一栏.
我知道只使用div和单独的页眉、正文和页脚组件就可以做到这一点，但我更希望它是一个表，因为在语义表中包含表数据似乎更合适(尽管如果这不可能，那么这可能就是可行的方法).
div {
max-height: 160px;
overflow: auto;
}
table {
width: 100%;
}
th, td {
border: 1px solid black;
}
thead {
background-color: white;
position: sticky;
top: 0;
}
tfoot {
background-color: white;
position: sticky;
bottom: 0;
}<div>
<table>
<thead>
<tr><th>HEAD</th><th>HEAD</th><th>HEAD</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</tbody>
<tfoot>
<tr><td>FOOT</td><td>FOOT</td><td>FOOT</td></tr>
</tfoot>
</table>
</div>table {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
th, td {
border: 1px solid black;
}
thead, tbody, tfoot, tr {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / 4;
}
tbody {
max-height: 128px;
overflow: auto;
}
tfoot {
position: sticky;
bottom: 0;
}<table>
<thead>
<tr><th>HEAD</th><th>HEAD</th><th>HEAD</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</tbody>
<tfoot>
<tr><td>FOOT</td><td>FOOT</td><td>FOOT</td></tr>
</tfoot>
</table>table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
}
tbody {
display: block;
max-height: 128px;
overflow: auto;
width: 100%;
}<table>
<thead>
<tr><th>HEAD</th><th>HEAD</th><th>HEAD</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</tbody>
<tfoot>
<tr><td>FOOT</td><td>FOOT</td><td>FOOT</td></tr>
</tfoot>
</table>