CSS/HTML:如果表格不适合屏幕,如何强制水平滚动条？

Question

我有一个横向格式的大表,要求每列的最小宽度(见下文),以使列保持足够宽,以便正确输入.

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

该表总共有15列并使用了一个colgroup,第一列有" col1" 类,第二列有" ",col2其他所有都有" col3"来应用样式.

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

谁能告诉我这里做错了什么？@ 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

将表包裹在div中并将所有内容设置在那里.

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

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