我希望我的HTML表格能够整列滚动列，让所有单元格保持一致。
以下示例的结果应该是表格底部的两个水平滚动条：一个位于＃1列底部，另一个位于＃3列底部，滚动相应滚动上方的所有单元格同时禁止。
如何在不使用绝对长度的情况下单独使用CSS？
table {
width: 100%;
table-layout: fixed;
}
col.left,
col.right {
overflow-x: auto;
}
td {
white-space: nowrap;
border-bottom: 1px solid silver;
}
td.left,
td.right {
min-height: 5em;
}
td.middle {
width: 2em;
text-align: center;
}<table>
<colgroup>
<col class="left" />
<col class="middle" />
<col class="right" />
</colgroup>
<tbody>
<tr>
<td class="left">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
<td class="middle">< ></td>
<td class="right">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td class="left">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
<td class="middle">< ></td>
<td class="right">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd, no sea takimata<br/>sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore<br/>et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no sea sanctus est Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td class="left">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
<td class="middle">< ></td>
<td class="right">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no sea sanctus est Lorem ipsum dolor sit amet.</td>
</tr>
</tbody>
</table>
答案 0 :(得分：1)
这是我能想到的最接近的东西 - 它将可滚动列放在tbody元素中，将固定列放在thead元素中，并利用启用滚动表体的功能独立于标题。不幸的是，我认为你仍然需要指定可滚动列的宽度才能使overflow-x: scroll起作用。
table thead, table tbody {
display: inline-block;
}
table tbody {
width: 200px;
overflow-x: scroll;
white-space: nowrap;
}<table>
<tbody>
<tr>
<td class="left">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam. At vero eos et accusam et justo dua kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td class="left">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam. At vero eos et accusam et justo dua kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
</tr>
</tbody>
<thead>
<tr>
<td class="middle">< ></td>
</tr>
<tr>
<td class="middle">< ></td>
</tr>
</thead>
<tbody valign="top">
<tr>
<td class="right">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam. At vero eos et accusam et justo dua kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td class="right">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam. At vero eos et accusam et justo dua kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
</tr>
</tbody>
</table>