css - 使用 flexbox 创建响应式表格

Question

如何创建响应式表格？

我要的表和这张类似:

表格必须是响应式的，所以必须改变的是列的宽度。

我认为最好的解决方案是使用 Flexbox，但是如何呢？

我试试这段代码:

.container {
  display: flex;
  border: 1px solid black;
}

.column {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
}

.cell {
  border: 1px solid black;
  padding: 5px;
}

<div class="container">
  <div class="column">
    <div class="cell"></div> <!-- empty cell -->
    <div class="cell">something</div>
    <div class="cell">dog</div>
    <div class="cell">more dogs</div>
  </div>

  <div class="column">
    <div class="cell">column2 long title</div>
    <div class="cell">abc</div>
    <div class="cell">a</div>
    <div class="cell">aaaaaaa</div>
  </div>

  <div class="column">
    <div class="cell">column 3 tilew</div>
    <div class="cell">bbbb</div>
    <div class="cell">da</div>
    <div class="cell">f</div>
  </div>

  <div class="column">
    <div class="cell">something</div>
    <div class="cell">ggggg</div>
    <div class="cell">f</div>
    <div class="cell">cats</div>
  </div>
</div>

我简单地创建了 4 列，每列有相同的行数，当然，它们的高度不会相同。我该如何解决？

那么，第一个单元格必须是空的

非常感谢!

Answer 1

我不明白为什么您需要使用 flexbox 而不是表格。无论如何，您可以在这里使用 CSS 网格布局只是为了不使用表格 - 问题中的代码很容易设置。

这里也使用display: contents - 注意它在新的浏览器中被支持 - 完全支持解释 here .

.container {
  display: grid; /* grid containers */
  grid-template-columns: repeat(4, 1fr); /* four columns */
  grid-template-rows: repeat(4, 1fr); /* four rows */
  grid-auto-flow: column; /* in column direction */
  border: 1px solid black;
}

.column {
  display: contents; /* the child elements would be grid items */
  border: 1px solid black;
}

.cell {
  border: 1px solid black;
  padding: 5px;
}

<div class="container">
  <div class="column">
    <div class="cell"></div> <!-- empty cell -->
    <div class="cell">something</div>
    <div class="cell">dog</div>
    <div class="cell">more dogs</div>
  </div>

  <div class="column">
    <div class="cell">column2 long title</div>
    <div class="cell">abc</div>
    <div class="cell">a</div>
    <div class="cell">aaaaaaa</div>
  </div>

  <div class="column">
    <div class="cell">column 3 tilew</div>
    <div class="cell">bbbb</div>
    <div class="cell">da</div>
    <div class="cell">f</div>
  </div>

  <div class="column">
    <div class="cell">something</div>
    <div class="cell">ggggg</div>
    <div class="cell">f</div>
    <div class="cell">cats</div>
  </div>
</div>