如何創建固定佈局的表格？

我正在爲我的網站佈局使用html表格。當我們按下一個單元格中的輸入時，單元格正在調整大小。我用css來修復表格佈局。表格佈局不變，但單元格正在調整大小。

.pageContent table 
{ 
    height:100%; 
    width:100%; 
    table-layout:fixed; 
} 
.pageContent table tr td 
{ 
    padding:5px 10px 5px 10px; 
}

如何防止這種調整表格單元格的大小？

2010-02-20 Vibin Jith

在哪一點你準確地按下'enter'？ – 2010-02-20 10:46:37

嘗試不使用表格進行頁面佈局。儘可能使用語義html。 DIVS非常適合佈局。有了這個說法，請將您的網頁發佈到我們可以看到的地方，因爲通過現場示例可以更容易地理解您的問題。 – pixeline 2010-02-20 10:47:21

@pixeline - 在這個問題中沒有什麼建議表格被用於佈局。例如，它可能是一個報告表，在這種情況下，DIV可能是更糟糕的選擇。 – Tom 2010-02-20 13:31:24

您的表格正在重新調整大小，因爲您使用的是比例寬度。

有很多方法可以控制這個。例如，通過以像素爲單位設置您的高度或高度：

CSS: 
table td {height: 20px;}

您的單元格將不再垂直重新調整大小。

2010-02-20 13:29:36 Tom

這很難確定，但是您尚未在td上設置尺寸，只能填充。所以td將會擴展以包含裏面的東西。在某些瀏覽器中，這可能會稍微改變一些焦點。

你可以嘗試爲td設置一個明確的寬度和高度（以ems或像素爲單位）嗎？

.pageContent table tr td 
{ 
    padding: 5px 10px 5px 10px; 
    width:8em; 
    height:2em; 
}

你可以發表一些你的標記，或讓我們知道單元格中的內容是什麼？（以及哪些瀏覽器出現問題）。

2010-02-20 10:50:14

您是否嘗試過加入以下CSS

td { overflow:hidden;white-space:nowrap; } 
tr { height:1em; } /* or set an appropriate height and width */

這將隱藏在細胞中溢出然而，但他們不會調整。

使用<div>元素，您的佈局可能會更容易處理語義正確的HTML，但需要查看標記。

2010-02-20 10:50:32

回答