代码之家 › 专栏 › 技术社区 › Alex from Jitbit

空表单元格高于非空表单元格

html-table firefox css html

Alex from Jitbit · 技术社区 · 6 年前

我正在努力解决渲染问题(这可能是火狐的一个bug,因为Chrome和Edge看起来不错)

一个空的 <td> (表格单元格)使整行更高如果有 padding 和 vertical-align 应用于此单元格(或包含行)。如果表格单元格为非空-高度问题将消失。添加一个愚蠢的   修复此问题。

下面是代码示例

table {float:left;margin-right:10px} /* so tables are side-by-side just to demonstrate the bug */

td {
  vertical-align:baseline;
  padding-bottom:20px;
}

<table border=1>
  <tr>
    <td>this table is taller</td>
    <td></td>
  </tr>
</table>

<table border=1>
  <tr>
    <td>this table is shorter</td>
    <td>beacuse there's text here</td>
  </tr>
</table>

J小提琴: http://jsfiddle.net/snhvc6dx/10/

有人面临类似的情况和/或知道解决方法吗?

我在火狐62.0B6上

更新:The vertical-align:baseline 非常!!)经常为许多前端框架添加“css reset”样板文件,所以这不是我的选择。至于“为什么会有人需要空的 td “好吧,这个表是在运行时呈现的,只是数据库中没有该单元格的数据。

5 回复 | 直到 6 年前

Temani Afif 6 年前

我不太清楚这个问题,但是你可以依靠伪元素来添加一个空元素,这和添加一样。   :

table {float:left;margin-right:10px} /* so tables are side-by-side */

td {
  vertical-align:baseline;
  padding-bottom:20px;
}
td:after {
 content:"";
}

<table border=1>
  <tr>
    <td>this table is taller</td>
    <td></td>
  </tr>
</table>

<table border=1>
  <tr>
    <td>this table is shorter</td>
    <td>beacuse there's text here</td>
  </tr>
</table>

Steven Lambert 6 年前

我不能百分之百地肯定这是个问题,但基于一些实验,这似乎是一致的。

文本基线是一件有趣的事情(解释 very well in this other StackOverflow question )基本上,文本元素可以根据使用的字体具有不同的高度。此高度决定文本基线的位置。

当查看firefox字体检查器时,文本元素的默认字体是TimesNew Roman(或浏览器的默认字体),但是对于空单元格,没有指定字体。

看起来,火狐“无字体”字体的基线与TimesNew-Roman不同。您可以通过创建两个 <span> 使用相同的senario标记并查看元素框的基线。

当元素与基线对齐时,空元素具有不同的基线,因此文本被向下推以匹配它。

因为这似乎是一个火狐的问题,我不知道你是否可以做很多事情来修复这个组合而不是不使用 vertical-align: middle 在表中使用 top , middle 或 bottom .

table {float:left;margin-right:10px} /* so tables are side-by-side */

td {
  vertical-align:top;
  padding-bottom:20px;
}

<table border=1>
  <tr>
    <td>this table is taller</td>
    <td></td>
  </tr>
</table>

<table border=1>
  <tr>
    <td>this table is shorter</td>
    <td>beacuse there's text here</td>
  </tr>
</table>

如果你不能避免,那么@temani的答案似乎是最好的行动方案。

Karol Samborski 6 年前

它看起来像一个错误或未定义的行为。您可以通过设置相同的行高使它们相等高度,例如行高:30px

-1

Chris Hitchcock 6 年前

如果你在第一个下面设置未来的内容,我会使用colspan。如果在第一行之前不需要更多的行,只需删除第二个td

<table border=1>
  <tr>
    <td colspan=2>this table is taller</td>
  </tr>
  <tr>
    <td>more content</td>
    <td>even more content</td>
  </tr>
</table>

<table border=1>
  <tr>
    <td>this table is shorter</td>
    <td>beacuse there's text here</td>
  </tr>
  <tr>
    <td colspan=2>I has content 2 bars of content</td> 
  </tr>
</table>

所以,如果你需要它穿过这两者。

如果您的表没有其他内容,请删除第二个td

<table border=1>
  <tr>
    <td> this table is taller</td>
  </tr>
</table>

这是一把小提琴 http://jsfiddle.net/snhvc6dx/32/

请记住,如果不使您的表响应,这将无法调整大小,因此当屏幕变小时,您的表将堆叠在一起,而不是并排放置。

-1

Peter Riess 6 年前

http://jsfiddle.net/snhvc6dx/11/

所以,您告诉浏览器文本应该设置为基线,但您是从底部基线填充单元格。

只需将垂直对齐设置为中间

vertical-align:middle;

如果文本应停留在单元格顶部,则返回顶部…不填充底部