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

带有th类的

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

此表格在Firefox和Chrome中按我的要求显示：列的高度彼此成比例。

但Safari以不同方式显示它，它只是按内容将高度设置为前两列，并拉伸最后一行以填充剩余空间。但我想完成其中一项结果：

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

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

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

我还尝试将.bottom-cell的固定高度与calc的{{1}}函数结合起来：

.top-cell

Demo on plunker.

Answer 1

问题

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

在.first-column上设置明确的高度是导致您的表格无法正确显示的主要原因。
依靠浏览器来正确分隔您的元素是最棘手的。让我们不要忘记，我们甚至没有考虑过各种版本的IE如何显示你的桌子。
您目前拥有表格的方式在语义上并不正确，因为您拥有<thead>中的所有数据，并且所有内容都被视为数据的标头（即{{1}而不是<th>）。因此，请确保使用正确的标签更新表格。

解决方案

开发人员尝试在其设计中考虑每个场景（即可容纳任意数量文本的表格）是很常见的，但这最终是不切实际的，通常会导致设计/代码一致性低下。

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

代码（Demo）

HTML

.first-column

CSS

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

<强>更新

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

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

1 个答案: