我正在尝试使用固定单元格宽度和父容器溢出的大型表。这是一个fiddle，我要让容器溢出。为什么它不起作用以及如何正确执行？
.container {
overflow: scroll;
}
.tracks-container {
table-layout: fixed;
}
.sequencer-cell {
border: 1px solid #ccc;
width: 25px;
}<div class="container">
<table class="tracks-container">
<tbody>
<tr>
<th>reese</th>
<td class="sequencer-cell"> </td>
...62 other cells...
<td class="sequencer-cell"> </td>
</tr>
<tr>
<th>guitar</th>
<td class="sequencer-cell"> </td>
...62 other cells...
<td class="sequencer-cell"> </td>
</tr>
</tbody>
</table>
</div>
答案 0 :(得分：0)
不确定导致此问题的根本原因，但可以将display: inline-block添加到单元格类中，以使浏览器无法忽略其宽度。然后，您必须将white-space: nowrap;添加到容器中以防止默认包装。
.container {
overflow: scroll;
white-space: nowrap;
}
.tracks-container {
table-layout: fixed;
}
.sequencer-cell {
border: 1px solid #ccc;
width: 25px;
display: inline-block;
}<div class="container">
<table class="tracks-container">
<tbody>
<tr>
<th>reese</th>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
</tr>
<tr>
<th>guitar</th>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
</tr>
</tbody>
</table>
</div>
答案 1 :(得分：0)
使用min-width来代替，我不知道为什么这样做会有效，因为我对表格的处理还不多。等待解释。
.container {
overflow: scroll;
}
.tracks-container {
table-layout: fixed;
}
.sequencer-cell {
border: 1px solid #ccc;
min-width: 25px;
}<div class="container">
<table class="tracks-container">
<tbody>
<tr>
<th>reese</th>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
</tr>
<tr>
<th>guitar</th>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
<td class="sequencer-cell"> </td>
</tr>
</tbody>
</table>
</div>