HTML表格的水平滚动条

Question

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

HTML：

dvc remove data/2.mp4.dvc
dvc remove data/3.mp4.dvc

dvc add data/2.mp4 
dvc add data/3.mp4 

用户界面如下所示：

CSS：

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

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

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

用户界面现在看起来像这样：

尝试过CSS：

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

Answer 1

您正在使用overflow-x: scroll;，如果您想使用竖线，请使用overflow-y: scroll; 使用这个：

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

Answer 2

第一种方法：

overflow: scroll; // Scrollbar visible
overflow: auto;   // Scrollbar displayed when needed

第二种方法：

1. 显示：您的表格块

2. 设置溢出-x：“自动”

   table{
       display: block;
       overflow-x: auto;
       white-space: nowrap;
   }