Html 当表格单元格的属性为contentEditable时，表格单元格没有高度，但单元格中没有数据

我有一个自动调整大小的html表。表的底部有一个额外的行，其元素包含contentEditable=“true”属性

当contentEditable=“true”单元格行中没有任何单元格具有任何值时，该行几乎没有高度。相反，如果contentEditable=“true”单元格行中的任何单元格具有任何值，则该行中的所有单元格都会显示其上方行的高度

这把小提琴显示了我的问题。 下面的第一个表在第一个设置了contentEditable=“true”的单元格中有一个“.”字符。该行正确显示：

<h4>Table where last line can be edited</h4>
<h5>(the contenteditable row has a "." in the name field</h5>
<table border="1">
<tr>
  <th>Name</th>
  <th>Address</th>
  <th>Telephone</th>
</tr>
<tr>
  <td>Billy Byte</td>
  <td>999 MyStreet</td>
  <td>555 777 8558</td>
</tr>
<tfoot>
    <td contenteditable="true"><div>.</div></td>
    <td contenteditable="true"><div></div></td>
    <td contenteditable="true"><div></div></td>
</tfoot>
</table>

可编辑最后一行的表格
（contenteditable行的名称字段中有一个“.”
名称
地址
电话
比利字节
999 MyStreet
555 777 8558
.

下面的第二个表在任何contentEditable字段中都没有“.”字符，高度 该表行的长度非常小。请参见以下内容：

<h4>Same Table, no "." in the Name field</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th>Address</th>
  <th>Telephone</th>
</tr>
<tr>
  <td>Billy Byte</td>
  <td>999 MyStreet</td>
  <td>555 777 8558</td>
</tr>
<tfoot>
    <td contenteditable="true"><div></div></td>
    <td contenteditable="true"><div></div></td>
    <td contenteditable="true"><div></div></td>
</tfoot>
</table>

相同的表，名称字段中没有“.”
名称
地址
电话
比利字节
999 MyStreet
555 777 8558

我相信这可能很简单，但我似乎找不到答案。

---

非常感谢您的帮助

您可以创建最小高度，这样，如果它为空，它至少会显示最小高度

使用20px或任意像素

所以如果你有CSS文件，你可以把它扔进去

td { 
   min-height: 20px;
}

如果没有CSS文件，只需在html中的头标记之间添加样式标记，如下所示

<style type="text/css">
td { min-height: 20px; }
</style>

td{最小高度：20px；}

谢谢。效果很好。如果前几行没有高度规范，是否有一种相对简单的方法可以动态地将td高度建立在前几行的基础上？再次感谢。嗯。这似乎对我不起作用，而你上次的建议起了作用。我想知道我做错了什么。我将上述内容复制到了JSFIDLE css部分中离子，但它没有改变高度。（你的第一个建议是这样的）。