<table>
<tr>
<td>Test</td>
<td>A long string blah blah blah</td>
</tr>
</table>
<style>
td{max-width:67%;}
</style>
上述方法不起作用。如何使用百分比设置表格单元格的最大宽度?
根据 CSS 2.1 规范中 max-width 的定义,"'min-width' 和 'max-width'对表格、内联表格、表格单元格、表格列和列组的影响是未定义的"。因此,您不能直接在 td 元素上设置 max-width。
如果你只想让第二列最多占 67%,那么你可以将宽度(实际上是表格单元格的最小宽度)设置为 33%,例如在示例中
td:first-child { width: 33% ;}
为两列都设置宽度的效果并不好,因为这样做往往会使浏览器赋予两列相等的宽度。
我知道这已经是一年以后的事了,但我还是想和大家分享一下。 我也想做同样的事情,结果发现这个解决方案对我很有用。 我们为整个表格设置了最大宽度,然后通过调整单元格大小来达到预期效果。
将表格放在自己的 div 中,然后根据需要为整个表格设置 div 的宽度、最小宽度和/或最大宽度。 然后,你就可以为其他单元格设置宽度和最小宽度,并为 div 设置最大宽度,这样就可以有效地进行循环往复,从而达到我们想要的最大宽度。
<div id="tablediv">
<table width="100%">
<tr>
<td class="tdleft">Test</td>
<td>A long string blah blah blah</td>
</tr>
</table>
</div>
然后在样式中加入
#tablediv {
width:90%;
min-width:800px
max-width:1500px;
}
.tdleft {
width:20%;
min-width:200px;
}
诚然,这本身并不能给你提供单元格的最大宽度,但它确实允许你进行一些控制,以代替这种选项。 不知道是否能满足你的需求。 我知道它适用于我们的情况,即我们希望页面中的导航栏上下缩放至一个点,但现在的屏幕都很宽。