Блог

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

Приведенная таблица представлена следующим образом :

A B C D

E F G H

Я Дж К Л

Я хочу, чтобы он появлялся столбец за столбцом, как это :

A

E

Я

B

F

J

C

.

.

В моем файле css я использую только следующее свойство, поэтому изменения затрагивают только небольшие экраны

 @media 

only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) 
 

вот основной пример того, что вы могли бы сделать. Не уверен, что это лучшая практика.

 
table {
  display: flex;
  flex-flow: row wrap;
  border-collapse: collapse;
  min-width: 0px;
  min-height: 0px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

tr,
tbody {
  box-sizing: border-box;
  display: flex;
  flex-flow: row wrap;
  align-item: center; // used for example aligns items horizontally center
  justify-content: space-between; // used for example aligns items with space between
  min-width: 0px;
  min-height: 0px;
  width: 100%;
  max-width: 100%;
}

td {
  width: 100%;
  max-width: 33%;
  flex: 1 1 33%;
}
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
  td {
    max-width: 100%;
    flex: 1 1 100%;
  }
}
 

 <table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
  </tbody>
</table>
 

Поскольку вы новичок в html/css, я бы посоветовал вам поиграть здесь: https://flexboxfroggy.com/ поскольку это может объяснить, как работает flex.

ПРАВКА: Если решение работает, используйте классы вместо тегов.