如何向表格添加水平滚动

Question

我有一个表格，其中我有固定的标题和tbody上的垂直滚动。但是，此表中的列可以显著增加，我想添加水平滚动。当有超过3列时，表看起来不正确。

带有三列的JS小提琴(应该是什么样子)：https://jsfiddle.net/maxshuty/DTcHh/42626/

具有四列的JS小提琴(这看起来应该像三列小提琴)：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

我删除了float并添加了flexbox，并添加了#Row1样式来实现溢出。我希望这能帮到你。

​

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

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

​