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

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

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>

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

文本基线是一件有趣的事情(解释 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的答案似乎是最好的行动方案。

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

如果你在第一个下面设置未来的内容,我会使用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/

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

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

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

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

vertical-align:middle; 

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