Question

给出以下HTML结构：

<div class="column">
  <div class="cell"></div>
  <div class="cell">text</div>
  <div class="cell"></div>
</div>
<div class="column">
  <div class="cell"></div>
  <div class="cell">multi line text</div>
  <div class="cell"></div>      
</div>

请注意，单元格是在列内定义的。它与常规表的不同之处在于每行定义单元格。

如果单元格只包含一行文本，那么很容易使它看起来像一张桌子。但是，如果单元格包含多行文本，是否可以实现单元格高度调整？

因此结果应该与表格相似：

<table>
  <tr>
    <td></td><td></td>
  </tr>    
  <tr>
    <td>text</td><td>multi line text</td>
  </tr>
  <tr>
    <td></td><td></td>
  </tr>
</table>

我认为也许flexbox能够做到这一点，但我不确定它是否可行。

Answer 1

正如@zajd在他的评论中指出的那样，如果你的意图是显示表格数据，那么你肯定应该继续使用<table>，因为它是专门为此目的而制作的。请注意，Flexbox 不是来替换<table>元素。

话虽如此，完全可以模拟＆＃34;使用Flexbox的表行为。你可以用一点CSS来做到这一点：

＆＃13;

.flexbox-table .row {
  display: flex;
  align-items: stretch;
}
.flexbox-table .row .cell {
  flex: 1;
  border: 1px solid #ccc;
}

＆＃13;

<div class="flexbox-table">
  <div class="row">
    <div class="cell"></div>
    <div class="cell">text</div>
    <div class="cell"></div>
  </div>
  <div class="row">
    <div class="cell"></div>
    <div class="cell">multi line text multi line text multi line text multi line text multi line text multi line text multi line text multi line text multi line text multi line text multi line text multi line text</div>
    <div class="cell"></div>
  </div>
  <div class="row">
    <div class="cell"></div>
    <div class="cell">text</div>
    <div class="cell"></div>
  </div>
</div>

＆＃13;

这种方法也可以解决＆＃34;多线＆＃34;你问过的文字问题。

基于列的表是否可以在html和/或css中使用

1 个答案: