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中的head标签之间添加样式标签，就像这样

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

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

1 个答案: