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

Question

我有一个具有以下布局的表格:

<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;
}

具有 .first-column 类的

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

并且此表在 Firefox 和 Chrome 中显示如我所愿:列的高度设置为彼此成比例。

但 Safari 显示不同，它只是根据内容将高度设置为前两列，并拉伸(stretch)最后一行以填充剩余空间。但我想完成其中一个结果:

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

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

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

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

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

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

---

Demo on plunker.

Answer 1

问题

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

1. 在您的 .first-column 上设置明确的高度是您的表格未正确显示的主要原因。

2. 依靠浏览器来适本地间隔您的元素充其量是棘手的。别忘了，我们甚至没有考虑过各种版本的 IE 如何显示您的表格。

3. 您当前的表结构方式在语义上不正确，因为您的所有数据都在 <thead> 中。并且所有内容都被视为您数据的 header (即 <th> 而不是 <td> )。因此，请确保使用正确的标签更新表格。

解决方案

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

因此，我建议您为您的数据设置明确的高度(这会无意中设置您的 .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;
}

更新

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