Question

这是一个示例，包含一个包含多个tbody元素的表元素 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来填充可用空间。

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

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

Answer 1

这是有趣的行为。如果不使用Javascript来计算子项并相应地设置高度，可以使用flexbox来完成（就像许多事情一样）。这是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中允许夜晚出夜的属性是flex:1上的.wrap。

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

1 个答案: