爲什麼我不能在HTML表格中指定單元格的寬度和高度？

Question

我使用CSS，但爲了快速測試，我只是使用了內聯樣式。這就是我想實現的代碼：

echo "<td style='height=10px; width=10px;'>"; 

它確保了電池的最大寬度爲10px的，但是高度與文本溢出所以它得到非常大（高）。

我想要實現的是在該單元格中的任何信息超過30個字符我想隱藏所以你看不到它。

（我知道30個字符比10px的更多，但我只是在玩，看看它的工作！）

Answer 1

你的語法是錯誤的：

壞

echo "<td style='height=10px; width=10px;'>"; 

好

echo "<td style='height:10px; width:10px;'>"; 

但是，這並沒有解決問題。我閱讀spec的方式，只允許固定的佈局表格在溢出時剪輯它們的內容（而不是調整大小以容納它）。

更好/更簡單的方法是使用DIV。

見這個例子：http://jsfiddle.net/Aa4JL/

但是，如果你的數據表格，你需要使用一個表，你可以通過在DIV包裝單元格的內容達到同樣的效果。

<table> 
    <tr> 
    <td><div style='height:10px; width:10px; overflow: hidden;'>This text is clipped.</div></td>   
    </tr> 
</table>​ 

請注意，如果你不關心削波基於高度則可以使用帶white-space: nowrap與text-overflow: ellipsis組合結合固定表格排版達到一個很好的效果省略號。這不需要用DIV包裝內容。請注意，省略號效果只能在較新的瀏覽器中使用（內容仍應在較舊的瀏覽器中剪輯）。

<table style="table-layout:fixed;width:50px;"> 
    <tr> 
    <td style='width:50px; overflow: hidden; white-space:nowrap; text-overflow: ellipsis;'>Long string of text with nice ellipses effect.</td>   
    </tr> 
</table> 

這撥弄了我剛剛介紹的所有技術：http://jsfiddle.net/Aa4JL/4/

Answer 2

我認爲你不能做到這一點。只有 HTML定義，這意味着將細胞是什麼尺寸的電池的底座尺寸如果你沒有任何文字。如果你的文字較大，那麼它不會阻止它的單元格。

更好的方法來做你想做的是使用PHP和substring（）函數..

讓我知道，如果它可以幫助，或者如果您需要與

Answer 3

的HTML屬性也應在雙引號定義的幫助，如

echo "<td style=\"height:10px; width:10px;\">"; 

Answer 4

<style type="text/css"> 
td { 
    overflow-x: hidden; 

} 
</style> 

Answer 5

看來，如果你的工作包裹td內容在一個div：

演示：http://jsfiddle.net/LUmNc/

Answer 6

您可以使用文本溢出。 This是使用text-overflow:ellipsis的示例。我僅通過複製上述示例中的代碼，在jsfiddle上創建了一個示例。