我有一个自动调整的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>
我确信它可能很简单,但我似乎无法找到答案。 非常感谢您的帮助
答案 0 :(得分:0)
你可以做一个最小高度,如果它是空的,它至少会显示最小高度。
使用20px或多少像素!
所以如果你有CSS文件,你可以把它扔到那里
td {
min-height: 20px;
}
如果没有CSS文件,只需在html中的head标签之间添加样式标签,就像这样
<style type="text/css">
td { min-height: 20px; }
</style>