Question

我正在解决呈现问题（这可能是Firefox中的错误，因为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>

jsfiddle：http://jsfiddle.net/snhvc6dx/10/

有人遇到类似问题和/或知道解决方法吗？

PS。我正在使用Firefox 62.0b6

更新：对于许多前端框架，vertical-align:baseline非常非常（！）由“ CSS重置”样板添加的，所以这不是我的选择。至于“为什么有人需要空的td？”很好，此表是在运行时呈现的，数据库中没有该单元的数据。

Answer 1

我不确切知道问题所在，但是您可以依靠伪元素添加一个空元素，就像添加 一样：

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>

Answer 2

我不是100％肯定这是问题所在，但根据一些实验，这似乎是巧合。

文本的基线是一件有趣的事情（解释为very well in this other StackOverflow question）。本质上，基于所使用的字体，文本元素可以具有不同的高度。该高度决定了文本基线的位置。

在查看Firefox字体检查器时，文本元素的默认字体为Times New Roman（或您的浏览器默认为任何字体），但对于空白单元格，则未分配任何字体。

似乎Firefox的“无字体”字体与Times New Roman的基线有所不同。您可以通过创建两个具有相同senario的<span>标签并查看元素框的基线来验证这一点。

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

由于这似乎是Firefox的问题，除了不在表中不使用vertical-align: middle而是使用top，{ {1}}或middle。

bottom

table {float:left;margin-right:10px} /* so tables are side-by-side */

td {
  vertical-align:top;
  padding-bottom:20px;
}

如果您无法避免，那么@Temani的答案似乎是最好的选择。

Answer 3

它看起来像是错误或未定义的行为。您可以通过设置相同的行高（例如line-height：30px）来使它们相等的高度

Answer 4

如果您要设置低于第一个内容的将来内容，请使用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/

请记住，如果不使表格具有响应性，就不会调整大小，因此，随着屏幕变小，表格将堆叠在彼此的顶部，而不是并排放置。

Answer 5

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

因此，您告诉浏览器该文本应设置为基线，但您要从底部基线填充该单元格。

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

vertical-align:middle;

或顶部（如果文本应保留在单元格顶部...无填充底部

）

空表单元格比非空单元格高

5 个答案: