Как добавить горизонтальную прокрутку к столу - PullRequest
Новая
       6

Как добавить горизонтальную прокрутку к столу

0 голосов
/ 24 апреля 2018

У меня есть таблица с фиксированными заголовками и вертикальной прокруткой на 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;
}

Что препятствует переполнению строк.

1 Ответ

0 голосов
/ 24 апреля 2018

Пожалуйста, проверьте ссылку ниже:

Проверьте демо

Я удалил 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;
}
...