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

时间:2013-12-19 01:45:59

标签: html html-table contenteditable

我有一个自动调整的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>

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

1 个答案:

答案 0 :(得分:0)

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

使用20px或多少像素!

所以如果你有CSS文件,你可以把它扔到那里

td { 
   min-height: 20px;
}

如果没有CSS文件,只需在html中的head标签之间添加样式标签,就像这样

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