HTML/CSS - 我怎樣才能讓我的表格列不會變得更寬我所描述的寬度如下

Question

我有<td width="25%">但是如果它填充大於25％的東西會變得更大。我怎樣才能阻止它變得比使用CSS或html的25％更大

Answer 1

使用的CSS table-layout:fixed在桌子上

這裏找到：http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout

Answer 2

你可以使用max-width樣式屬性，並將其設置爲25％。

td{ 
    max-width:25%; 
} 

Answer 3

您可以使用max-width: 25%;來防止超過最大寬度;話說回來，這是一個CSS的解決方案，而不是HTML屬性，所以你不得不使用：

<td style="max-width: 25%;">...</td> 

或者，更好的，指定樣式表：

td { 
    max-width: 25%; 
} 

正如@ Asherer正確地注意到（在評論中），這不一定適用於所有瀏覽器。爲了執行max-width，可能值得將td的內容打包在div（或者，如果它們是內聯元素，則爲span）並且將max-width應用於元素。

例如：

<td> 
    <div> 
     Cell contents 
    </div> 
</td> 

td { 
    width: 25%; 
    max-width: 25%; 
} 

td div { 
    width: 100%; 
    overflow: hidden; /* or 'auto', or 'scroll' */ 
} 

這可以隨着時間的推移有點亂，我通常不會增加不必要的加價的粉絲，但在這種情況下，它確實援助交叉瀏覽器兼容。

Answer 4

檢查該SO線程。這可能是有用的How to limit a table cell to one line of text using CSS?

下面是一些CSS，可以幫助你：

td { 
    white-space: nowrap; 
    overflow: hidden; 
    width: 25%; 
    height: 25px; 
    border: 1px solid black; 
} 

table{ 
    table-layout:fixed; 
    width: 200px; 
}