«Гибкая» адаптивная таблица с использованием divs.Где полный столбец растягивается, если в состоянии - PullRequest
Новая
       23

«Гибкая» адаптивная таблица с использованием divs.Где полный столбец растягивается, если в состоянии

0 голосов
/ 03 июля 2019

Хорошо. Рассмотрим, у меня есть таблица с 3 столбцами. «Обычно» каждый столбец должен занимать 1/3 страницы. Однако если один из данных столбца становится слишком большим, а другие столбцы имеют дополнительное пространство, он должен «согнуться», и столбец должен занять оставшееся пространство.

Однако это все равно должна быть «таблица»: как в столбцах и границах строк необходимо выровнять.

При использовании наивных флекс-боксов я пробовал сначала подход с использованием строки и столбца. Однако у обоих есть проблема в том, что «внутренний» flexbox может растягиваться, но эта информация теряется в других flex-боксах.

Я попытался решить ее ниже, используя оба метода: но, как вы можете видеть, это не работает: 

 .bordered{
      border-width: 1px;
      border-color: black;
      border-style: solid;
    }
    
    .main {
      display: block;
      position: relative;
    }
    
    .row {
      display: flex;
      position: relative;
      width: 100%;
    }
    
    .cell {
      flex: 1 1 auto;
      max-width: 75%;
    }
 <div class="main bordered">
       <div class="row">
           <div class="cell bordered">
               first
           </div>
           <div class="cell bordered">
               second
           </div>
           <div class="cell bordered">
               third
           </div>
       </div>
       <div class="row">
           <div class="cell bordered">
               first
           </div>
           <div class="cell bordered">
               This is text that will increase the width of the cell.
           </div>
           <div class="cell bordered">
               third
           </div>
       </div>
       <div class="row">
           <div class="cell bordered">
               first
           </div>
           <div class="cell bordered">
               This is text that will increase the width of the cell. Not only that, but due to the amount of text it also increases the height of a row. This isn't a problem with this setup. But had we chosen to use a column-first approach this cell would destroy any "row" layout.
           </div>
           <div class="cell bordered">
               third
           </div>
       </div>
    </div>

Можно ли это сделать? Или я должен отказаться от этого?

1 Ответ

1 голос
/ 03 июля 2019

Flexbox, вероятно, является , а не наилучшим решением для этого. Я бы порекомендовал использовать CSS Grid Layout . Есть много способов сделать это, но это только начало.

Используйте 3-столбцовую, 3-рядную сетку с ячейками автоматической ширины (используйте необязательный min-width для экономии места). 

.main {
  display: grid;
  position: relative;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
}

.bordered {
  border-width: 1px;
  border-color: black;
  border-style: solid;
}

.cell {
  grid-column-end: span 1;
}

.cell:nth-child(3n+1) {
  grid-column-start: 1;
  min-width: 50px;
}

.cell:nth-child(3n+2) {
  grid-column-start: 2;
}

.cell:nth-child(3n+3) {
  grid-column-start: 3;
  min-width: 100px;
}
<div class="main bordered">
  <div class="cell bordered">
    first
  </div>
  <div class="cell bordered">
    second
  </div>
  <div class="cell bordered">
    third
  </div>
  <div class="cell bordered">
    first
  </div>
  <div class="cell bordered">
    This is text that will increase the width of the cell.
  </div>
  <div class="cell bordered">
    third
  </div>
  <div class="cell bordered">
    first
  </div>
  <div class="cell bordered">
    This is text that will increase the width of the cell. Not only that, but due to the amount of text it also increases the height of a row. This isn't a problem with this setup. But had we chosen to use a column-first approach this cell would destroy any
    "row" layout.
  </div>
  <div class="cell bordered">
    third
  </div>
</div>
</div>
...