CSS / HTML:当表格不适合在屏幕上时，如何强制水平滚动条？

Question

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

因此，当达到这个最小大小时，我需要强制出现一个水平滚动条，而不是进一步缩小表的列。

该表共有15列，使用一个colgroup，第一列有"col1“类，第二列有"col2”，其他所有列都有"col3“来应用样式。

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

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

My 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/