Таблица на основе Flexbox

Question

Я хочу построить таблицу с несколькими столбцами с динамическими данными.Это приводит к невозможности использования базы <table>, поскольку при изменении содержимого она будет изменять ширину столбцов.Также мне нужно реализовать опцию, чтобы скрыть некоторые столбцы через JS.

Поэтому я решил построить таблицу на основе flexbox.Тем не менее, я борюсь с тем, как бороться с шириной столбца, когда я скрываю некоторые столбцы.

Например, у меня есть следующая таблица

.table {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  min-height: 200px;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.table-head {
  color: #a4a;
  font-weight: 500;
}

.table-cell {
  padding: 10px;
  flex-grow: 1;
  width: 100%;
  overflow: hidden;
}

.table-cell:nth-child(1) {
  width: 20%;
}

.table-cell:nth-child(2) {
  width: 10%;
}

.table-cell:nth-child(3) {
  width: 30%;
}

.table-cell:nth-child(4) {
  width: 20%;
}

.table-cell:nth-child(5) {
  width: 20%;
}

<div class="table">
  <div class="row">
    <div class="table-cell table-head">
      Name
    </div>
    <div class="table-cell table-head">
      Phone number
    </div>
    <div class="table-cell table-head">
      Email
    </div>
    <div class="table-cell table-head">
      Address
    </div>
    <div class="table-cell table-head">
      Country
    </div>
  </div>

  <div class="row">
    <div class="table-cell">Peter</div>
    <div class="table-cell">123123</div>
    <div class="table-cell">peter@example.com</div>
    <div class="table-cell">asdsad</div>
    <div class="table-cell">empty</div>
  </div>

  <div class="row">
    <div class="table-cell">Bob</div>
    <div class="table-cell">123124</div>
    <div class="table-cell">bob@bob.com</div>
    <div class="table-cell">sadsads</div>
    <div class="table-cell">empty</div>
  </div>
</div>

И я хочу скрыть 4-й столбец.Так как там было создано дополнительное пространство, остальные столбцы должны взять его и стать больше.

Как сделать так, чтобы столбцы имели ширину и соотношение?Например, столбец адреса должен быть больше столбца страны.Также может быть случай, когда остается только один столбец, чтобы он занимал 100% ширины.

Я пытался использовать flex-grow, чтобы сделать ширину, однако я столкнулся с проблемой, что мойстолбцы даже не равны (строка заголовка имеет свои собственные пропорции и свое тело), ​​поэтому даже нет макета таблицы, когда столбцы не скрыты.

Answer 1

используйте flex:1 или 2, 3, ... вместо width

.table {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  min-height: 200px;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.table-head {
  color: #a4a;
  font-weight: 500;
}

.table-cell {
  padding: 10px;
  flex:1;
  overflow: hidden;
}

.table-cell:nth-child(1) {
  flex:3;
}

.table-cell:nth-child(2) {
flex:3;
}

.table-cell:nth-child(3) {
flex:3;
}

.table-cell:nth-child(4) {
flex:6;
}

.table-cell:nth-child(5) {
flex:2;
}

<div class="table">
  <div class="row">
    <div class="table-cell table-head">
      Name
    </div>
    <div class="table-cell table-head">
      Phone number
    </div>
    <div class="table-cell table-head">
      Email
    </div>
    <div class="table-cell table-head">
      Address
    </div>
    <div class="table-cell table-head">
      Country
    </div>
  </div>

  <div class="row">
    <div class="table-cell">Peter</div>
    <div class="table-cell">123123</div>
    <div class="table-cell">peter@example.com</div>
    <div class="table-cell">asdsad</div>
    <div class="table-cell">empty</div>
  </div>

  <div class="row">
    <div class="table-cell">Bob</div>
    <div class="table-cell">123124</div>
    <div class="table-cell">bob@bob.com</div>
    <div class="table-cell">sadsads</div>
    <div class="table-cell">empty</div>
  </div>
</div>

Я удаляю четвертую ячейку таблицы с помощью jquery:

$(document).ready(function(){
  $('.table-cell:nth-child(4)').fadeOut(1000);
})

.table {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  min-height: 200px;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.table-head {
  color: #a4a;
  font-weight: 500;
}

.table-cell {
  padding: 10px;
  flex:1;
  overflow: hidden;
}

.table-cell:nth-child(1) {
  flex:3;
}

.table-cell:nth-child(2) {
flex:3;
}

.table-cell:nth-child(3) {
flex:3;
}

.table-cell:nth-child(4) {
flex:6;
}

.table-cell:nth-child(5) {
flex:2;
}

<div class="table">
  <div class="row">
    <div class="table-cell table-head">
      Name
    </div>
    <div class="table-cell table-head">
      Phone number
    </div>
    <div class="table-cell table-head">
      Email
    </div>
    <div class="table-cell table-head">
      Address
    </div>
    <div class="table-cell table-head">
      Country
    </div>
  </div>

  <div class="row">
    <div class="table-cell">Peter</div>
    <div class="table-cell">123123</div>
    <div class="table-cell">peter@example.com</div>
    <div class="table-cell">asdsad</div>
    <div class="table-cell">empty</div>
  </div>

  <div class="row">
    <div class="table-cell">Bob</div>
    <div class="table-cell">123124</div>
    <div class="table-cell">bob@bob.com</div>
    <div class="table-cell">sadsads</div>
    <div class="table-cell">empty</div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>