CSS / HTML：当 table 不适合屏幕时如何强制水平滚动条？

Question

我有一个大的 table 横向格式，要求每列都有一个最小宽度（见下文），以便列保持足够的宽度以进行适当的输入。

因此，我需要在达到最小尺寸时强制显示水平滚动条，而不是进一步缩小 table 的列。

table一共有15列，使用colgroup，第一列有class“col1”，第二列有“col2”和所有其他人都有“col3”来应用样式。

然后我尝试添加以下样式，但 table 仍在进一步缩小，并且在使用较小的屏幕进行测试时我没有获得所需的水平滚动条 尺寸。

有人可以告诉我我做错了什么吗？在这里使用 @ media screen 会更有意义吗？

我的CSS:

#myTable {
    font-size: 14px;
    min-width: 100%;
    overflow-x: scroll;
    table-layout: fixed;
}
#myTable .col1 {
    width: 35px;
}
#myTable .col2 {
    min-width: 180px;
}
#myTable .col3 {
    min-width: 108px;
    width: 6.5%;
}

非常感谢，麦克

Answer 1

将 table 包裹在 div 中并在那里设置所有内容。

<div id="tableWrapper">
    <table id="myTable">
       <tr>
           ...
       </tr>
    </table>
</div>

工作 JSFiddle：https://jsfiddle.net/h037abq3/24/

CSS / HTML：当 table 不适合屏幕时如何强制水平滚动条？

CSS / HTML: How to force horizontal scrollbar when table does not fit on screen?

html

css

overflow

scrollbar