Question

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

由于这个原因，我需要强制在达到最小尺寸时出现水平滚动条，而不是进一步缩小表格的列。

该表总共有15列并使用了一个colgroup，第一列有＃34; col1＆＃34;类，第二列有＆＃34; col2＆＃ 34;而所有其他人都有＆＃34; col3＆＃34;应用样式。

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

有人能告诉我这里做错了什么吗？在这里使用@ 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/

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

1 个答案: