Можете ли вы «разбить строку» таблицы с помощью CSS по ширине или количеству столбцов?
У меня есть таблица HTML с 17 столбцами в 2 строках заголовков и 1 строке тела. В большинстве настольных представлений эта таблица хорошо вписывается в мой дизайн, но на маленьких экранах таблица выступает над своим родительским элементом, и создается значительная горизонтальная прокрутка.
Мне было интересно, есть ли способ в CSS/HTML/JS поймать таблицу, превышающую определенную ширину, или подсчитать количество столбцов (или любой другой разумный способ сделать это) и заставить ее «разбить» на новую строку, точно так же, как к абзацу добавляется разрыв строки. Я хочу поймать это программно (а не просто переписывать таблицу в несколько таблиц), поскольку работа с большим экраном значительно лучше без этого гипотетического разрыва строки столбца.
В идеале я хотел бы сохранить определения css table-cell и т. д. (например, не просто сделать все display: block и покончить с этим).
Чтобы добавить сложности, некоторые ячейки заголовков в верхней строке охватывают два столбца. Я надеюсь, что будет найдено решение, которое либо не разбивает эти ячейки, либо копирует текст в ячейке в оба столбца после разрыва.
Это все внутри фреймворка Foundation 6, если есть какие-то инструменты, которые я пропустил. Я пытался использовать Foundation's <table class = "stack">, но это не сработало — он показывает только основную строку, я думаю, потому что некоторые ячейки заголовка охватывают несколько столбцов.
Хороший крик @MrLister, я поиграю с ними и посмотрю, смогу ли я добиться того, что мне нужно. Спасибо.
Ответы 2
Вы можете попробовать использовать css-сетка с медиа-запросом
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;
}
}
Проведя дополнительные исследования, я вижу, что нет «правильного» способа сделать то, что я хотел сделать. В моем случае самый простой способ добиться желаемого результата визуально состоял в том, чтобы сделать каждую пару столбец/столбец отдельной таблицей, а затем заставить эти таблицы отображаться в виде блоков и перемещаться влево. Это не очень хорошо с точки зрения семантики (новая таблица для каждой важной точки данных), но это внутренний инструмент для использования небольшой командой, поэтому я не трачу на это больше времени.
Поможет ли какой-нибудь из ответов на Адаптивные таблицы, умный способ?