我如何使用百分比来设置表格单元格的最大宽度?

<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的定义, “对表,内联表,表格单元格,表格列和列组的”最小宽度“和”最大宽度“的影响是不确定的。不能直接在td元素上设置最大宽度。

如果您只希望第二列占用最多67%,那么您可以将宽度(对于表格单元实际上是最小宽度)设置为33%,例如在示例中

 td:first-child { width: 33% ;} 

设置这两个列将不会很好,因为它往往会使浏览器给列等宽。

老问题,我知道,但现在可以使用CSS属性table-layout: fixed在表标记。 从这个问题下面的答案在表格单元格中的CSS百分比宽度和文本溢出

这很容易通过使用table-layout: fixed ,但有点棘手,因为没有多less人知道这个CSS属性。

 table { width: 100%; table-layout: fixed; } 

在更新的小提琴在这里看到它的行动: http : //jsfiddle.net/Fm5bM/4/

我知道这是一年后,但我想我会分享。 我试图做同样的事情,遇到了这个解决scheme,为我工作。 我们为整个表格设置一个最大宽度,然后使用单元大小来获得所需的效果。

把表放在它自己的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; } 

诚然,这不会给你一个细胞本身的“最大”宽度,但它确实允许一些控制,可能代替这种选项。 不知道它是否会满足您的需求。 我知道这适用于我们希望页面中的导航侧可以上下缩放到一定程度的情况,但对于现在所有的大屏幕。

百分比应该是相对于绝对大小,试试这个:

 <table> <tr> <td>Testasdas 3123 1 dasd as da</td> <td>A long string blah blah blah</td> </tr> </table> <style> table{width:200px;} td{width:65%;border:1px solid black;} </style>