Question

以下html会导致表格行包含太高的表格。为什么会发生这种情况（我只在Firefox中查看过）以及我需要将它缩小到“盒子”形式的高度。

<html>
<head><title>Table Test</title></head>
<body>
<center>
<p>The bottom row of the table is too tall for the contents ...</p>
<table border="1">
<tr><th align="center">Field Name</center></td><th align="center">Field Value</center></td><tr>
<tr><td align="right">KEYCODE</td><td>NANTC06500402.00417</td></tr>
<tr><td align="right">PADVER</td><td>nantC0402.0 </td></tr>
<tr><td align="right">PARISH_CODE</td><td>NANT</td></tr>
<tr><td align="right">TAGGED</td><td>0</td></tr>
<tr><td align="right">DATED</td><td>8410420 </td></tr>
<tr><td align="right">FORENAME</td><td>WILLIAM </td></tr>
<tr><td align="right">SEX</td><td>M </td></tr>
<tr><td align="right">FATHER_FORENAME</td><td>JOHN </td></tr>
<tr><td align="right">MOTHER_FORENAME</td><td>ANNE </td></tr>
<tr><td align="right">SURNAME</td><td>PALIN </td></tr>
<tr><td align="right">OCCUPATION</td><td>OSTLER </td></tr>
<tr><td align="right">RESIDENCE</td><td>NANT </td></tr>
<tr><td align="right">ADDITIONAL_INFORMATION</td><td>HOSPITAL STREET</td></tr>
<tr><td align="left">
      <form method="post" action="...">
      <input type="submit" value="PREV">
      <input type="text" name="keycode" value="NANTC06500402.00416" size="30" readonly>
      </form>
    </td>
    <td align="right">
      <form method="post" action="...">
      <input type="text" name="keycode" value="NANTC06600401.10001" size="30" readonly>
      <input type="submit" value="NEXT">
      </form>
    </td></tr>
</table>
</center>
</body></html>

我已尝试使用div来保存每个表单（上面的代码中未显示），但这不起作用。我也尝试在单元格中垂直地对齐表单 - 这也不起作用。

问题是我的HTML还是浏览器呈现单元格内容的方式......？

Answer 1

我检查了代码，这样可以正常渲染所有行的高度。

虽然我发现了两个错位的标签你应该删除。

</center>在第一行的字段名称
</center>在第一行的字段值

此外，您可以使用type='hidden'作为下一个/上一个按钮附近的键值，如果它们不是显示那些键值的必要条件。

您是否有任何设置表格高度的外部样式表？

Answer 2

下面的代码避免了额外的空间问题，我猜这是一个浏览器呈现问题，我无法解决，也没有解释。解决方案是一种设计更改，它使可点击实体成为值本身而不是单词“next”和“prev”。因此，服务器看到“next”/“prev”和正确的值，然后很容易处理。通过此更改，额外空间在FF11，FF27，IE和Safari中消失。

<!DOCTYPE HTML>
<html>
<head><title>Table Test 2</title></head>
<body>
<center>
<p>The bottom row of the table is the correct size ...</p>
<form method="post" action="....">
<table border="1">
<tr><th align="center">Field Name</th><th align="center">Field Value</th></tr>
<tr><td align="right">KEYCODE</td><td>NANTC06500402.00417</td></tr>
<tr><td align="right">PADVER</td><td>nantC0402.0 </td></tr>
<tr><td align="right">PARISH_CODE</td><td>NANT</td></tr>
<tr><td align="right">TAGGED</td><td>0</td></tr>
<tr><td align="right">DATED</td><td>8410420 </td></tr>
<tr><td align="right">FORENAME</td><td>WILLIAM </td></tr>
<tr><td align="right">SEX</td><td>M </td></tr>
<tr><td align="right">FATHER_FORENAME</td><td>JOHN </td></tr>
<tr><td align="right">MOTHER_FORENAME</td><td>ANNE </td></tr>
<tr><td align="right">SURNAME</td><td>PALIN </td></tr>
<tr><td align="right">OCCUPATION</td><td>OSTLER </td></tr>
<tr><td align="right">RESIDENCE</td><td>NANT </td></tr>
<tr><td align="right">ADDITIONAL_INFORMATION</td><td>HOSPITAL STREET</td></tr>
<tr><td align="left">
       PREV
       <input name="prev" type="submit" value="NANTC06500402.00416">
    </td>
    <td align="right">
       <input name="next" type="submit" value="NANTC06600401.10001">
       NEXT
    </td></tr>
</table>
</form>
</center>
</body></html>

我道歉，我不是专家，无法提供解释或真正的解决方案。但是，如果你想避免像这样的额外空间问题，我的阅读似乎表明最好重新设计html，以便为表格提供单一表格，并相应地调整内容的外观和处理，以及如上图所示。

我相信这可能对某人有帮助......

表中的表格单元格高度太大

2 个答案: