使用CSS創建帶固定寬度列的HTML表格

我希望表格具有固定寬度但動態高度，因爲內容可能具有各種長度。下面是一個例子：使用CSS創建帶固定寬度列的HTML表格

alt text

我有固定的寬度，但該內容重疊。我做錯了什麼？這裏是我的代碼：

<table width="60%" align='center' cellpadding='2' 
     cellspacing='2' border='2' style='table-layout:fixed'> 
    <thead> 
     <tr> 
      <th>#</th> 
     </tr> 
    </thead> 
    <tbody> 
     ... 
    </tbody> 
</table>

而且我的CSS：

table{ 
font-size:12px; 
} 

table td{ 
    padding:5px; height:auto; 
    background:#f6f6f6; 
} 

table thead tr th{ 
    background:#d7dbe2; 
}

任何想法如何使高度動態的？

來源

2010-11-25 Lost in OWL

當內容超出單元格列的寬度時，您想要什麼行爲？ a：拉伸細胞，或b：隱藏額外的內容？（例如，如果您的內容包含大字符串值，且沒有空格或其他標點符號） – scunliffe 2010-11-25 11:11:38

table td{ 
    word-wrap:break-word; 
}

這爲我工作;）

來源

2010-11-25 11:50:35

我懷疑文中沒有'breaking points'（如空格）。所以文本不能分解成多行。一種解決方案是在文本可能中斷的地方添加。

來源

2010-11-25 11:10:14 PeeHaa

的問題可能是由您使用的table-layout: fixed引起的 - 我建議把style="width: 150px;"在每個<th>標籤和去除table-layout

來源

2010-11-25 11:13:39

的<th>寬度往往取代<td>寬度。所以簡單地將寬度應用於<th>（正如Kolink所說）應該可以解決您的溢出問題。

table thead tr th{ 
    width:120px; 
}

來源

2010-11-25 18:48:22

使用CSS創建帶固定寬度列的HTML表格

回答

相關問題