时间戳

首页 > 解决方案 > 如何向表格添加水平滚动

html - 如何向表格添加水平滚动

问题描述

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

具有三列的 JS Fiddle（它的外观）：https ://jsfiddle.net/maxshuty/DTcHh/42626/

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

这阻止了行被溢出。

标签： htmlcsstwitter-bootstraphtml-table

解决方案

请查看以下链接：

检查演示

我删除了浮动并添加了 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;
}

推荐阅读