Как средствами CSS сделать так, чтобы колонки в таблице переносились на другую строку?

Question

[files32]

Как средствами CSS сделать так, чтобы колонки в таблице переносились на другую строку?
Есть таблица

<table>
<tr>
<td>1</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
</tr>
</table>

Если смотреть через телефон, то она уходит вправо и нужзно ее скролить. Как только через CSS сделать так, чтоб ячейки переносились на другую сторону, чтобы небыло горизонтальной прокрутки?

Comments

[Иван]

откажитесь от допотопной системы сеток при помощи table и будьте стильными, модными молодёжными, юзайте гриды, на крайняк флексы

[files32]

Иван, я в этом тугой. Код уже есть и думал что через CSS можно было разрулить

[Иван]

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

[Froggyweb]

Иван, рисовать флексами таблицы ты извращенец и не любишь семантику :(
таблица должна быть таблицой.
адаптировать ее сложнее но https://css-tricks.com/accessible-simple-responsiv...

[Froggyweb]

files32, https://css-tricks.com/accessible-simple-responsiv...

[Иван]

Froggyweb, обидеть художника может каждый, а ты попробуй отс...
А вообще, таблица таблицей, но в 2к20 использовать такие теги - время на ветер, всё равно придётся переделывать, в худшем случае придётся по пикселям рассчитывать, чтобы было адекватно. Но если у тебя приличная таблица, ты хоть что сделай, хоть расшибись, она не будет адаптивной и красивой, тут и выходят гриды. Хотя, если таблица состоит из одного заголовка и одной ячейки, то конечно можно и заюзать))

Answer 1

[AlexVOK]

@media screen and (max-width: 568px) {
  table td {
    display:inline-block;
  }
}

Указываете, в стилях для экранов под телефоны другой стиль. Например, можно поменять у них display, чтобы сделать перенос.