浏览器以不同的方式呈现多个 tbody 高度

Posted 2023-05-07

【中文标题】浏览器以不同的方式呈现多个 tbody 高度

【英文标题】：Browsers render multiple tbody height differently

【发布时间】：2018-06-10 14:55:56

【问题描述】：

这是一个示例，包含一个带有多个 tbody 元素的 table 元素 https://jsfiddle.net/aoLbuafx/

HTML

    <table>
  <tbody class="tbody1">
    <tr>
      <td>Eka</td>
      <td>Toka</td>
      <td>Kolmas</td>
    </tr>
  </tbody>

    <tbody class="tbody2">
    <tr>
      <td>Sisältö</td>
      <td>Sisältö</td>
      <td>Sisältö</td>
    </tr>
        <tr>
      <td>Sisältö</td>
      <td>Sisältö</td>
      <td>Sisältö</td>
    </tr>
        <tr>
      <td>Sisältö</td>
      <td>Sisältö</td>
      <td>Sisältö</td>
    </tr>
  </tbody>

    <tbody class="tbody3">
    <tr>
      <td>Eka</td>
      <td>Toka</td>
      <td>Kolmas</td>
    </tr>
  </tbody>
</table>

CSS

table 
  height: 500px;


.tbody1 
  background-color: red;


.tbody2 
  background-color: blue;


.tbody3 
  background-color: green;

最终结果是浏览器呈现此表的方式非常不同。 Firefox 平均共享 tbody 元素之间的总高度，而 Chrome 更喜欢使用第一个 tbody 来填充可用空间。

是否可以像 Firefox 一样帮助 Chrome 渲染表格，在 tbody 元素之间共享高度，同时保持表格高度固定？

旁注：将第一个 tbody 更改为 thead，将最后一个 tbody 更改为 tfoot 会有所帮助，因为在这种情况下，Chrome 更喜欢唯一的 tbody 元素来填充可用空间。不过，这不是我想要的。

【参考方案1】：

这是有趣的行为。在不使用 javascript 来计算子项并相应地设置高度的情况下，这可以通过 flexboxes 来完成（很多事情都可以）。 这是 html：

<div class="table">

  <div class="wrap tbody1">
      <div class="cell">Eka</div>
      <div class="cell">Toka</div>
      <div class="cell">Kolmas</div> 
  </div>

  <div class="wrap tbody2">
      <div class="cell">Sisältö</div>
      <div class="cell">Sisältö</div>
      <div class="cell">Sisältö</div>
  </div>

  <div class="wrap tbody2">
      <div class="cell">Sisältö</div>
      <div class="cell">Sisältö</div>
      <div class="cell">Sisältö</div>
  </div>

  <div class="wrap tbody2">
      <div class="cell">Sisältö</div>
      <div class="cell">Sisältö</div>
      <div class="cell">Sisältö</div>
  </div>

  <div class="wrap tbody3">
      <div class="cell">Eka</div>
      <div class="cell">Toka</div>
      <div class="cell">Kolmas</div> 
  </div>
</div>

还有 CSS：

.wrap 
    display: flex;
    flex: 1; 
    justify-content: space-between;


.cell 
    display: flex; 
    width: 100%; 
    padding: 5px;


.table 
  height: 500px;
  display: flex; 
  flex-direction: column; 

这是一个JSFiddle，添加了一些样式。 flexbox 中允许高度平衡的属性是.wrap 上的flex:1。