css - HTML 表格的水平滚动条

Question

我有一个带有垂直滚动条的 HTML 表格。

HTML：

<div className="table_wrapper">
    <table>
        <thead></thead>
        <tbody className="add-insurance_table_tbody">...</tbody>
    </table>
</div>

用户界面如下所示：

CSS：

&_tbody {
    height:calc(100vh - 350px);
    overflow:auto;
    overflow-x:hidden;
    display:block;
    width:100%;
    font-size: 12px;
}

现在我想增加表格的宽度并添加一个水平滚动条。我修改了上面的 CSS 并增加了表格的宽度。

出现水平滚动条，但没有滚动发生。

UI 现在看起来像这样：

试过CSS：

&_tbody {
    height:calc(100vh - 350px);
    overflow:auto;
    display:block;
    font-size: 12px;
    width:calc(100vh - 350px);
    overflow-x: scroll
}

标签： css

Answer 1

你正在使用overflow-x: scroll;如果你想要一个垂直条overflow-y: scroll; 使用这个：

yourTable {
   overflow-x: hidden;
   overflow-y: scroll;
}