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

Question

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

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

这是显示我的问题的小提琴。 http://jsfiddle.net/bjsfiddle/4mVgg/ 下面的第一个表有一个“。”设置了 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 字段中的字符和高度 该表行的数量非常小。见下文：

<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>

我确定这可能很简单，但我似乎无法找到答案。 非常感谢您的帮助

Answer 1

你可以做一个最小高度，这样如果它是空的，它至少会显示最小高度。

使用 20px 或任何你想要的像素！

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

td { 
   min-height: 20px;
}

如果没有 CSS 文件，只需像这样在 html 的头部标签之间添加样式标签

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