【问题标题】:How to stop HTML table from matching height of others in a grid?如何阻止 HTML 表格匹配网格中其他人的高度?
【发布时间】:2019-07-24 18:58:38
【问题描述】:

我的主页上有 3 个连续的表格,我正在使用 CSS 网格以这种方式显示它。 3 个表中的每一个都有不同数量的表行:第一个有 9 个,第二个有 7 个,第三个有 6 个。

在 Chrome 和 Safari 中,表格似乎显示得非常好,并且尊重我应用于每个 <tr> 的高度,但在 Firefox 中似乎存在问题。

无论左侧表格的高度是多少(有 9 行),其他两个表格的高度都会增加以匹配左侧表格的高度,如下所示:https://i.postimg.cc/7L5TrmzH/1.jpg

有没有人知道为什么会发生这种情况?

网站链接在这里:http://testing.mobnetwork.co.uk/index.html

提前谢谢你。

【问题讨论】:

  • 停止使用<tables> 进行布局。使用div 元素
  • 我使用的是 Firefox(在 Mac 上),但没有看到您描述的问题。

标签: html css firefox css-grid css-tables


【解决方案1】:

将以下 CSS 添加到您的 .resource-table 类中

align-self: flex-start;

此属性用于设置网格项目的对齐方式。更多信息在这里:https://developer.mozilla.org/en-US/docs/Web/CSS/align-self

【讨论】:

  • 这是一个网格容器,而不是弹性容器。在容器上使用align-items: start,或在项目上使用align-self: start
猜你喜欢
  • 2019-03-01
  • 1970-01-01
  • 2017-06-01
  • 1970-01-01
  • 2014-03-22
  • 2023-03-12
  • 2018-03-10
  • 1970-01-01
  • 2010-11-17
相关资源
最近更新 更多