Колонны сетки, имеющие разный размер с разметкой сетки

Question

Я пытаюсь построить таблицу с изменяемым размером (то есть: столбцы и строки должны быть изменяемого размера), используя сетку. Я хотел бы, чтобы начальные размеры столбцов автоматически корректировались на основе максимального содержимого ячейки, как это происходит с традиционными таблицами. Я пробовал разные способы установки параметра grid-template-columns, но ни один из них не работает должным образом: в некоторых случаях ячейки одинаковых столбцов не имеют одинаковый размер, в других все столбцы имеют одинаковый размер. Может быть, grid-template-columns не единственный параметр для рассмотрения. Кто-нибудь может дать мне какое-нибудь предложение для решения? Вот простой пример моей таблицы:

.resizable_table {
 display:inline-grid;
 grid-template-columns:auto;
}
.thead {
 background-color:#e6e6ff;
 border-bottom:1px solid blue;
}

.resizable_row {
 display:inline-grid;
 grid-template-columns:auto 1px auto 1px auto 1px auto 1px ; 
 min-height:30px;
 justify-content:start;
}
   
.resizable_cell {
 min-width:100px;
}
.hfiller{
 background-color:blue;
 cursor:col-resize;
}
.vfiller {
 background-color:blue;
 height:1px;
 cursor:row-resize;
}

<div id="table2" class="resizable_table">
 <div class="thead">
  <div class="resizable_row">
   <div class="resizable_cell">title</div><div class="hfiller"></div>
   <div class="resizable_cell">author</div><div class="hfiller"></div>
   <div class="resizable_cell">year</div><div class="hfiller"></div>
   <div class="resizable_cell">price</div><div class="hfiller"></div>
  </div>
 </div>
 <div class="tbody">
  <div class="resizable_row">
   <div class="resizable_cell">La mirabolante avventura di John Lempriere, erudito nel secolo dei lumi</div><div class="hfiller"></div>
   <div class="resizable_cell">Lawrence Norfolk</div><div class="hfiller"></div>
   <div class="resizable_cell">1996</div><div class="hfiller"></div>
   <div class="resizable_cell">30.00</div><div class="hfiller"></div>
  </div>
  <div class="vfiller"></div>
  <div class="resizable_row">
   <div class="resizable_cell">The Green Mile</div><div class="hfiller"></div>
   <div class="resizable_cell">Stephen King</div><div class="hfiller"></div>
   <div class="resizable_cell">1996</div><div class="hfiller"></div>
   <div class="resizable_cell">30.00</div><div class="hfiller"></div>
  </div>
  <div class="vfiller"></div>
 </div>
</div>

Answer 1

Я не уверен, какова цель filler Div служат, но что-то вроде этого кажется проще.

.resizable_table {
  display: inline-grid;
  grid-template-columns: auto;
}

.thead {
  background-color: #e6e6ff;
  border-bottom: 1px solid blue;
}

.resizable_row {
  display: inline-grid;
  grid-template-columns: repeat(4, min-content);
  min-height: 30px;
  justify-content: start;
}

.resizable_cell {
  min-width: 100px;
}

.hfiller {
  background-color: blue;
  cursor: col-resize;
}

.vfiller {
  background-color: blue;
  height: 1px;
  cursor: row-resize;
}

<div id="table2" class="resizable_table">
  <div class="thead">
    <div class="resizable_row">
      <div class="resizable_cell">title</div>
      <div class="resizable_cell">author</div>
      <div class="resizable_cell">year</div>
      <div class="resizable_cell">price</div>
    </div>
  </div>
  <div class="tbody">
    <div class="resizable_row">
      <div class="resizable_cell">La mirabolante avventura di John Lempriere, erudito nel secolo dei lumi</div>
      <div class="resizable_cell">Lawrence Norfolk</div>
      <div class="resizable_cell">1996</div>
      <div class="resizable_cell">30.00</div>
    </div>
    <div class="resizable_row">
      <div class="resizable_cell">The Green Mile</div>
      <div class="resizable_cell">Stephen King</div>
      <div class="resizable_cell">1996</div>
      <div class="resizable_cell">30.00</div>
    </div>
  </div>
</div>