У меня есть HTML-таблица с 17 столбцами более 2 строк заголовка и 1 строки тела. На большинстве рабочих столов эта таблица хорошо вписывается в мой дизайн, но на маленьких экранах таблица выходит за пределы родительского элемента, и создается значительный объем горизонтальной прокрутки.

Мне было интересно, есть ли способ в CSS / HTML / JS поймать таблицу, идущую по определенной ширине, или подсчитать количество столбцов (или любой другой разумный способ сделать это), и заставить его «разбиться» на новая строка, так же, как разрыв строки будет добавлен к абзацу. Я хочу уловить это программно (а не просто переписать таблицу в несколько таблиц), поскольку работа с большим экраном значительно лучше без этого гипотетического разрыва строки столбца.

В идеале я хотел бы сохранить определения CSS для таблиц-ячеек и т. Д. (Например, не просто делать все display: block и покончить с этим).

Чтобы добавить к сложностям, некоторые из ячеек заголовка в верхней строке занимают два столбца. Я надеюсь, что может быть найдено решение, которое либо не разбивает эти ячейки, либо копирует текст в ячейке в оба столбца после того, как сделан разрыв.

Это все внутри фреймворка Foundation 6, если есть какие-то инструменты, которые я пропустил. Я пытался использовать Foundation <table class="stack">, но он не работает - он показывает только строку тела, я думаю, потому что некоторые ячейки заголовка занимают несколько столбцов.

3
Ace Jon 28 Май 2019 в 14:40

2 ответа

Лучший ответ

Проведя больше исследований, я вижу, что нет «правильного» способа сделать то, что я хотел сделать. В моем случае самым простым способом достижения желаемого результата визуально было создать для каждой пары столбец / столбец свою собственную таблицу, а затем заставить эти таблицы отображаться в виде блоков и перемещаться влево. Это семантически не очень хорошо (новая таблица для каждой важной точки данных), но это для внутреннего инструмента, который будет использоваться небольшой командой, поэтому я не буду тратить на это больше времени.

0
Ace Jon 28 Май 2019 в 14:38

Вы можете попробовать использовать css-grid с медиа-запросом.

Больше

Примере

HTML
<ul>
 <li>A</li>
 <li>B</li>
 <li>C</li>
 <li>D</li>
 <li>E</li>
 <li>F</li>
</ul>

CSS
ul {
 display: grid;
 grid-template-columns: 140px 140px 140px 140px;
 grid-gap: 10px;
}

@media only screen and (max-width: 800px) {
 ul {
  grid-template-columns: 200px 200px;
 }

}

0
Jiml 28 Май 2019 в 13:10