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

【问题标题】：How can I set the max-width of a table cell using percentages?如何使用百分比设置表格单元格的最大宽度？
【发布时间】：2012-01-17 22:04:31
【问题描述】：

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

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

以上行不通。如何使用百分比设置表格单元格的最大宽度？

【问题讨论】：

请扩展“不起作用”。
你必须确保你的 td 的 PARENT 有一个特定的宽度（无论是你传递 width: 100%; 从正文到你的 td 的所有方式，或者你可以给父母（这里: tr) 1000px 或任何你喜欢的值。当在 css 中使用 %% 时，它总是使用父级中定义的精确 px，然后将 px 转换为子级的 %%，因为它们具有 relative 的大小给他们的父母。
作为记录，max-width 现在可以在 Safari 和 Chrome 中使用。我不确定它支持了多长时间。

标签： html css html-table

【解决方案1】：

我知道的老问题，但现在可以使用 table 标记上的 css 属性 table-layout: fixed。从下面这个问题CSS percentage width and text-overflow in a table cell

回答

使用table-layout: fixed 很容易做到这一点，但有点棘手，因为没有多少人知道这个 CSS 属性。

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

在此处更新的小提琴中查看它的实际效果：http://jsfiddle.net/Fm5bM/4/

【讨论】：

谢谢！我担心固定意味着它不会重新计算没有设置任何宽度的单元格的宽度，但幸运的是事实并非如此。
在你的 jsfiddle 中，如果我删除宽度属性，max-width 仍然不起作用，所以不知道这是如何解决问题的。
@superphonic 我想你很困惑。如果您删除该 jsfiddle 中的 max-width，宽度将保持不变，因此设置它的不是 max-width。如果将第一个td 替换为max-width: 10% 可能会更清楚...您会发现它没有改变。 jsfiddle.net/w3f8ey22/1
table-layout: fixed 不能解决 OP 问题。它不会神奇地使“最小宽度”在表格单元格上工作。如果 table-layout:fixed 被删除，两个引用的小提琴在显示上没有区别。
这个答案具有误导性，因为它与问题无关

【解决方案2】：

根据 CSS 2.1 规范中的definition of max-width，“'min-width' 和 'max-width' 对表格、内联表格、表格单元格、表格列和列组的影响是未定义的。”所以你不能直接在 td 元素上设置 max-width。

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

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

为两列设置该值不会很好，因为它往往会使浏览器给列赋予相等的宽度。

【讨论】：

实际上 max-width 现在可以在 Safari 和 Chrome 中使用。我不确定它支持了多长时间。
@Jay，如果它有效，我不知道它何时有效。
@TakeshiTokugawaYD，如果还设置了width 并且width 和max-width 都具有长度单位或百分比，那么td 的max-width 似乎在某种程度上受到尊重（在某种程度上）单位。对于table-layout:fixed，无论内容如何，都会受到尊重。

【解决方案3】：

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

将表格放在自己的 div 中，然后根据需要为整个表格设置 div 的宽度、最小宽度和/或最大宽度。然后，您可以为其他单元格设置宽度和最小宽度，并为 div 设置最大宽度，有效地前后左右工作以达到我们想要的最大宽度。

#tablediv {
    width:90%;
    min-width:800px
    max-width:1500px;
}

.tdleft {
    width:20%;
    min-width:200px;
}

<div id="tablediv">
  <table width="100%" border="1">
    <tr>
      <td class="tdleft">Test</td>
      <td>A long string blah blah blah</td>
    </tr>
  </table>
</div>

诚然，这并没有给你一个单元格本身的“最大”宽度，但它确实允许一些可能代替这种选项的控制。不确定它是否能满足您的需求。我知道它适用于我们希望页面中的导航侧放大和缩小到一个点的情况，但现在适用于所有宽屏幕。

【讨论】：

【解决方案4】：

百分比应该是相对于绝对大小，试试这个：

table {
  width:200px;
}

td {
  width:65%;
  border:1px solid black;
}

<table>
  <tr>
    <td>Testasdas 3123 1 dasd as da</td>
    <td>A long string blah blah blah</td>
  </tr>
</table>

【讨论】：