Возможно ли сделать трасформируемую таблицу? Когда неизвестно будет 2,3 или 4 колонки?

Question

[Юля]

Есть такое задание "таблица должна трансформироваться на 2-4 колонки. на 3 колонки делаем каждый столбик 33%, на 4 колонки - по 25%. в колонке может быть много текста, по высоте должна быть адаптивной"
Такое возможно вообще?

Comments

[alexalexes]

Возможно, эта статья поможет найти решение.
https://habr.com/ru/post/331316/

Answer 1

[alexalexes]

<div class="table">
      <div class="row">
        <div class="cell">1</div>
        <div class="cell">2</div>
        <div class="cell">3</div>
        <div class="cell">4</div>
      </div> 
    </div>

Возможно, даже несколькими способами.
Старинным табличным:

.table
      {
        display: table;
        table-layout: fixed; /* это свойство определяет ключевое поведение */
        width: 100%; /* это свойство определяет ключевое поведение */
      }
      .row
     {
        display: table-row;
      }
      .cell
      {
        background-color: #ff3344;
        display: table-cell;
      }

Современными:
через flex блоки:

.row
     {
        display: flex;
      }
      .cell
      {
        background-color: #ff3344;
        flex-basis: 100%; /* это свойство определяет ключевое поведение */
      }

Через grid блоки:

.row
     {
        display: grid;
        grid-auto-columns: 1fr; /* это свойство определяет ключевое поведение */
      }
      .cell
      {
        background-color: #ff3344;
        grid-row: 1; /* это свойство определяет ключевое поведение */
      }

Comments

[Юля]

Спасибо! Я совсем не подумала про grid сетку

Answer 2

[Сергей delphinpro]

Вопрос не очень ясен, можно трактовать по-разному.

Если нужна таблица, то тут вариант один – просто table-layout:fixed сделает все ячейки равной ширины, если им не указан размер.

Если речь идёт о сетке с переменным количеством колонок, то, помимо использования классов с явным указанием ширины для всех типов сетки, есть такой трюк, как количественные селекторы. Поищите, на хабре был подробный разбор.

Если речь о адаптивной сетке, когда количество колонок должно подстраиваться под ширину контейнера, то тут идеально подойдут css grid с использованием функции minmax

Answer 3

[Elena Fire]

Возможно. Прописываете необходимые стили в css и в разметке и пишите в .js все необходимые условия появления.