表格單元格高度太大

以下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或瀏覽器呈現單元格內容的方式......？

來源

2014-02-18 user3324385

下面的代碼避免了額外的空間問題，我認爲這是一個瀏覽器渲染問題，我無法解決並且沒有解釋。解決方案是一種設計更改，使可點擊的實體成爲值本身，而不是「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以使表格具有單一形式並相應地調整內容和處理的外觀，並且作爲如上所述。

我相信這可能會幫助別人......

來源

2014-02-19 13:08:28 user3324385

我檢查了代碼，這與所有行的高度相同。

雖然我發現兩個錯位的標籤，你應該刪除。

</center>第一行後，字段名稱在
</center>後字段值在第一行

此外，您還可以使用type='hidden'近一個/上一個按鈕鍵的值，如果不是必不可少的顯示這些。

您是否有任何設置窗體高度的外部樣式表？

來源

2014-02-18 17:22:22 Boshi

感謝您關注此事。 – user3324385

感謝您看到這個博時。很可能有我不知道的「全局」樣式表，但它們是否會影響你對桌子的視覺效果（和其他空間一樣多）？我如何在此代碼中關閉它們對此表的影響？ – user3324385

下一個和上一個框中的值是必需的，所以type ='hidden'將不合適。 – user3324385

表格單元格高度太大

回答

相關問題