时间戳

首页 > 解决方案 > 空表单元格比非空表单元格高

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

问题描述

我正在努力解决渲染问题（这可能是 Firefox 中的错误，因为 Chrome 和 Edge 看起来不错）

如果存在并应用于此单元格（或包含行），则空<td>（表格单元格）会使整行更高。如果表格单元格非空 - 高度问题就消失了。添加一个愚蠢的解决这个问题。paddingvertical-align&nbsp;

这是代码示例

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-reset”样板添加，所以它不是我的选择。至于“为什么有人需要一个空的td？” 好吧，这个表是在运行时呈现的，数据库中没有该单元格的数据。

标签： htmlcssfirefoxhtml-table

解决方案

我不知道确切的问题，但你可以依靠伪元素来添加一个空元素，它就像添加一样&nbsp;：

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>

推荐阅读