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;
}

如何向表中添加水平滚动

1 个答案: