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; 
}