Можете ли вы «разбить строку» таблицы, используя CSS по ширине или количеству столбцов?

Question

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

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

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

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

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

Answer 1

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

Answer 2

Вы можете попробовать использовать 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;
 }

}