Safari 计算列高的方式与其他浏览器不同

Question

我有一个 table 布局如下：

<table>
  <thead>
    <tr>
      <th rowspan="3" class="first-column">1. First column</th>
      <th class="top-cell">1. Second column</th>
      <th class="top-cell">1. Third column</th>
    </tr>
    <tr>
      <th class="bottom-cell">2. Second column</th>
      <th class="bottom-cell">2. Third column</th>
    </tr>
    <tr>
      <th class="bottom-cell">3. Second column</th>
      <th class="bottom-cell">3. Third column</th>
    </tr>
  </thead>
</table>

css:

table .first-column {
  height: 200px;
}

th 标签与 .first-column class 始终具有固定高度。如果需要，.bottom-cell 也可以固定高度（我已经尝试过这种方法，但没有解决问题）。 top-cell 必须有动态高度。

并且此 table 在 Firefox 中显示为我想要的 Chrome：列的高度设置为彼此成比例。

但 Safari 显示不同，它只是根据内容将高度设置为前两列，然后拉伸最后一行以填充剩余 space。但我想完成以下结果之一：

是否有任何解决方法可以像 Firefox 或 Chrome 那样在 Safari 中显示列？我知道如何用 js 来做，所以我正在寻找一个纯 css.

的解决方案

我已经尝试为.bottom-cell设置固定高度：

table .bottom-cell {
  height: 20px;
}

我还尝试将 .bottom-cell 的固定高度与 calc 函数结合用于 .top-cell:

table .bottom-cell {
  height: 20px;
}

table .top-cell {
  height: calc(100% - 40px);
}

Demo on plunker.

Answer 1

问题

对于您的问题，需要考虑三个独立但重要的事项。

在 .first-column 上设置明确的高度是造成 table 未正确显示的主要原因。
依靠浏览器正确 space 出你的元素充其量是棘手的。别忘了我们甚至还没有考虑过各种版本的 IE 是如何显示您的 table.
您当前 table 结构化的方式在语义上不正确，因为您将所有数据都放在 <thead> 中，并且所有内容都被视为 header为您的数据（即 <th> 而不是 <td>）。因此，请确保使用正确的标签更新 table。

解决方案

开发人员通常会尝试在他们的设计中考虑每个场景（即 table 可以容纳任意数量文本的场景），但这最终是不切实际的，而且通常会导致设计/代码不佳一致性。

因此，我建议您为您的数据设置明确的高度（这会无意中设置您的 .first-column 高度），以便在不同的浏览器上提供更一致的观看体验。

代码(Demo)

HTML

<table>
  <tbody>
    <tr>
      <td rowspan="3">1. First column</td>
      <td>1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ea sed, incidunt adipisci amet ullam quae rem dignissimos aspernatur consequatur animi perferendis esse. Assumenda a voluptates deleniti officiis nobis consequuntur.</td>
      <td>1. Porro obcaecati assumenda quae reiciendis at et, laudantium animi perferendis itaque corporis esse illo, alias eius, fugiat temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit commodi nihil, ex esse delectus vero libero, dignissimos iure aliquam voluptate id ab perferendis sapiente tempora. Voluptatem, perferendis ducimus in sit?</td>
    </tr>
    <tr>
      <td class="static-data">2. Second column</td>
      <td class="static-data">2. Third column</td>
    </tr>
    <tr>
      <td class="static-data">3. Second column</td>
      <td class="static-data">3. Third column</td>
    </tr>
  </tbody>
</table>

CSS

table {
  width: 400px;
}

table td {
  border: 1px solid #000;
}

.static-data {
  height: 80px;
}

更新

上面的代码已经更新，以在下面的评论中反映您的要求。第一行现在是动态的，而其余内容具有设置的固定高度。

Safari 计算列高的方式与其他浏览器不同

Safari calculates height of the columns differently from other browsers

html

css

safari

html-table