HTML/CSS - 我怎样才能让我的表格列不会变得更宽我所描述的宽度如下
问题描述:
我有<td width="25%">
但是如果它填充大于25%的东西会变得更大。我怎样才能阻止它变得比使用CSS或html的25%更大HTML/CSS - 我怎样才能让我的表格列不会变得更宽我所描述的宽度如下
答
你可以使用max-width样式属性,并将其设置为25%。
td{
max-width:25%;
}
答
您可以使用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' */
}
这可以随着时间的推移有点乱,我通常不会增加不必要的加价的粉丝,但在这种情况下,它确实援助交叉浏览器兼容。
+0
在所有浏览器这不会工作,只是一个供参考 – Ascherer 2011-03-03 15:22:26
答
检查该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;
}
+1,比较容易的方式(更简洁,更优雅),比我自己建议的解决方案:) – 2011-03-03 15:28:33