如何向表格添加水平滚动

Question

我有一个表格，其中在tbody 上有固定的标题和垂直滚动。但是，此表中的列可能会显着增长，我想添加水平滚动。在超过 3 列的那一刻，表格看起来不正确。

三列的 JS Fiddle（它应该看起来如何）：https://jsfiddle.net/maxshuty/DTcHh/42626/

四列的JS Fiddle（这应该看起来像三列fiddle）：https://jsfiddle.net/DTcHh/67311/

我相信有问题的课程是header-fixed。它有以下内容：

.header-fixed > tbody > tr:after,
.header-fixed > thead > tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

阻止行溢出。

Answer 1

请查看以下链接：

Check the demo

我删除了浮动并添加了弹性框，并添加了#Row1 样式以实现溢出。我希望这会有所帮助。

.header-fixed > thead > tr > th {
    width: auto;
    min-width: 20%;
    float: left;
    display: flex;
}

#Row1 {
  overflow-x: scroll;
    width: auto;
    display: inline-flex;
}