代码之家 › 专栏 › 技术社区 › Aram Becker

在firefox中设置表的td高度不起作用

css-tables html-table firefox css html

Aram Becker · 技术社区 · 7 年前

我有一张桌子,里面的细胞完全填满了。我给了内容固定的宽度和 height 属于 100% 所以那些变大的元素仍然能够生长细胞。通过简单的 高度 属性使内容的100%高度具有效果。在chrome和edge中,一切正常,但在firefox中,细胞不生长:

铬:

Firefox:

如果你想试试:

table {
  border-spacing: 8px;
  font-size: 14px;
}

td {
  height: 50px;
}

td div {
  height: 100%;
  width: 200px;
  background-color: green;
}

<table>
  <tr>
    <td>
      <div>
        This div is normal sized.
      </div>
    </td>
    <td>
      <div>
        This div is normal sized.
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div>
        This div is also normal sized but should size accordingly.
      </div>
    </td>
    <td>
      <div>
        This div is very very big so it gets higher and should affect other divs in the same row. But not in Firefox apparently.
      </div>
    </td>
  </tr>
</table>

不确定这是firefox的bug还是chrome的特性,但我理解表大小的方式是表元素不能有固定的大小。而是他们的 width 和 高度 属性用作 min-width / min-height 它们根据自己的内容成长。是否有快速的解决方法,或者我应该在flexbox布局中重建表?

更新

顺便说一句,当我设置一个 高度 在行上 tr 和 height: 100%; 在td上,它在firefox中工作。但后来它被铬破坏了…

1 回复 | 直到 6 年前

Aram Becker 6 年前

我设法找到了解决办法。我加了几行

@-moz-document url-prefix() {
    tr {
        height: 50px; // Your min height
    }
    td {
        height: auto;
    }
}

对我的css来说,现在它似乎在firefox和chrome中正确显示了。不是很干净,但很管用。

很明显,chrome在50版中采用了firefox的表行为,但由于它破坏了太多的布局,所以恢复了。技巧运用 height: 100%; 因为所有百分比大小都自动转换为 auto . 那就更有意义了。

推荐文章

Jordumus · 重新设计无表标记的网格布局

7 年前

tesicg · 如何从JavaScript数组填充div表?

7 年前

Derk Jan Speelman · 表内的绝对元素导致表启用溢出-y:以某种方式滚动

8 年前

B.Wesselink · 行达到XX时添加另一列

8 年前

d.k · 折叠边界模型在web浏览器中的实现是否有效?

9 年前

peter vries · 表格显示问题:带图像的块

9 年前

herrfischer · 如何“清除”CSS伪表行?

10 年前

Luca · 使div像表格一样

10 年前

alex · 表头组的正确排列方式是什么?

10 年前

Nicolas Bouvrette · 当高度为100%时,显示表格CSS的IE 10错误?

10 年前