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

<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元素上设置最大宽度。

如果只希望第二列最多占用67％，则可以将宽度（实际上是表单元格的最小宽度）设置为33％，例如在示例情况下

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

为两个列设置该值不能很好地工作，因为这会使浏览器为列提供相等的宽度。

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

使用可以很容易地做到这一点table-layout: fixed，但是有点棘手，因为很少有人知道此CSS属性。

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

在此处更新的小提琴上查看其运行情况：http : //jsfiddle.net/Fm5bM/4/

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

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