Разбить строки таблицы CSS - PullRequest
Новая
       175

Разбить строки таблицы CSS

1 голос
/ 13 июля 2020

Я пытаюсь разместить 3 таблицы по горизонтали (с именем table 1, 2, 3) на рабочем столе (Готово). Для мобильных устройств (здесь нужна ваша помощь) я хочу сделать таблицу 2 go под таблицей 1 и так далее, таблицу 3 под таблицей 2. Как и в примере, который я добавлю. 

<table class="calculator">
  <tr>
        <th class="col1"></th>
        <th class="col2"></th>
        <th class="col3"></th>
  </tr>
  <tr>
    <td>INSERIR VENDA</td>
    <td>DOCUMENTACAO COMERCIAL</td>
    <td>INSERIR RECLAMACAO</td>
    <td>FAQs</td>
  </tr>
  <tr>
    <td>GESTAO ENCOMENDAS</td>
    <td>ESTADO FINANCIAMENTO</td>
    <td>GESTAO RECLAMACOES</td>
    <td>QUESTÕES PARA FAQs</td>
  </tr>
  <tr>
    <td>PLANNING ENTREGAS</td>
    <td>REGISTO FINANCIAMENTO</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>STATUS</td>
    <td>PEDIR APOIO VENDA</td>
    <td>VIATURA SERVICO</td>
  </tr>
  <tr>
    <td>DOCUMENTACAO EM FALTA</td>
    <td>ESTADO DO PEDIDO APOIO</td>
    <td></td>
    <td></td>
  </tr>
</table>

Это выглядит примерно так: https://codepen.io/dolive/pen/ExPpbwg

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

адаптивно для мобильных устройств

Ссылка: введите здесь описание ссылки

У вас верить, что это возможно? Может ли кто-нибудь помочь "нубу"? Заранее большое спасибо

1 Ответ

0 голосов
/ 13 июля 2020

Из приведенного вами примера я не уверен, как вы хотите отображать сами данные (кроме направления столбцов).

Вот как вы бы использовали CSS для укладки столбцов: 

/*
 On mobile devices the divs are already vertically stacked,
 so only on larger screen sizes they will have to be horizontally stacked
*/
@media only screen and (min-width: 768px) {
  .grid__container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
}
<div class="grid__container">
  <div class="grid__item">
    <p>First block</p>
  </div>
  <div class="grid__item">
    <p>Second block</p>
  </div>
  <div class="grid__item">
    <p>Third block</p>
  </div>
</div>

Мотивация:

Обычная практика - начать с мобильной версии, а затем постепенно улучшать сайт как размер экрана растет. ( Исходный код UXPin в первом дизайне для мобильных устройств)

В примере используется сетка CSS. CSS grid дает вам большую гибкость, "складывая" блоки для разных размеров экрана. (Вы даже можете изменить порядок блоков div, если хотите.) (CSS -tricks source )

Обычно вы не хотите изменять отображение CSS свойство таблицы сама , потому что тогда вы теряете структурную разметку . ( исходный код w3.org ) Это затрудняет доступность. ( источник w3.org )

768px - точка останова. Это момент, когда вы хотите, чтобы ваши столбцы меняли направление. ( источник w3schools.org )

...