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

Question

<table>
<tr>
<td>Test</td>
<td>A long string blah blah blah</td>
</tr>
</table>

<style>
td{max-width:67%;}
</style>

以上不起作用.如何使用百分比设置表格单元格的最大宽度？

Answer 1

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

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

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

在这里更新的小提琴中查看它:http://jsfiddle.net/Fm5bM/4/

@superphonic我觉得你很困惑.如果删除jsfiddle中的`max-width`,宽度将保持不变,因此它不是设置它的`max-width`.如果用第一个`td`的'max-width:10%`替换它可能会更清楚......你会发现它没有改变.http://jsfiddle.net/w3f8ey22/1/ (4认同)
table-layout:fixed不解决OP问题.它没有神奇地使'min-width'在表格单元格上工作.如果删除table-layout:fixed,则两个引用的小提示在显示上没有区别. (4认同)
在你的jsfiddle中,如果我删除宽度属性,max-width仍然不起作用,所以不确定这是如何解决问题的. (3认同)
谢谢!我害怕固定意味着它不会重新计算没有任何宽度设置的单元格的宽度,但幸运的是并非如此. (2认同)
这个答案具有误导性,因为它与问题无关 (2认同)

Answer 2

根据CSS 2.1规范中max-width的定义,"min-width"和"max-width"对表,内联表,表格单元格,表格列和列组的影响是未定义的."所以你不能直接在td元素上设置max-width.

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

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

为两列设置它将不会很好,因为它往往使浏览器给列宽度相等.

@TakeshiTokukawaYD，如果还设置了“width”并且“width”和“max-width”都有长度单位或百分比单位，则似乎“td”的“max-width”受到尊重（在某种程度上）。对于“table-layout:fixed”，无论内容如何，它都会受到尊重。 (2认同)

Answer 3

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

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

不可否认,这并没有给你一个单元格的"最大"宽度,但它确实允许一些可能代替这种选项的控制.不确定它是否适合您的需求.我知道它适用于我们的情况,我们希望页面中的导航端可以向上和向下扩展到某一点,但是对于所有宽屏幕这些天.