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

Question

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

131

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

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

上述方法不起作用。我如何使用百分比设置表格单元格的最大宽度？

- Leo Jiang

1

请详细说明“不起作用”的具体情况。 - Sparky

1

你必须确保 td 的父元素具有特定的宽度（无论是从 body 到 td 传递 width: 100% 还是为父元素（这里是 tr）提供 1000px 或您喜欢的任何值）。在 CSS 中使用 %% 时，它总是使用父元素中定义的精确像素，然后将像素转换为子元素的 %%，因为它们相对于其父元素具有相对大小。 - Philipp Meissner

值得一提的是，max-width现在在Safari和Chrome中可以正常工作了。我不确定它已经支持多长时间了。 - Jay

5个回答

84

根据CSS 2.1规范中关于max-width属性的定义：“'min-width'和'max-width'对于表格、内联表格、表格单元、表格列和列组的影响未定义。”因此，无法直接在td元素上设置max-width。

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

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

设置两列的宽度相同可能效果不太好，因为这样会导致浏览器给两列分配相等的宽度。

- Jukka K. Korpela

实际上，max-width现在在Safari和Chrome中可以使用了。我不确定它已经支持多长时间了。 - Jay

@Jay，如果它能工作，那么它能够工作的条件对我来说是未知的。 - Takeshi Tokugawa YD

2

@TakeshiTokugawaYD，如果对td设置了width和max-width，并且它们都具有长度单位或百分比单位，则似乎也会尊重td的max-width（在某种程度上）。使用table-layout:fixed，无论内容如何也会尊重它。 - Superole

仍然适用于CSS 2.2工作草案。 - Simon

9

我知道这已经晚了一年，但我想分享一下。我曾尝试做同样的事情，然后找到了这个对我有用的解决方案。我们为整个表设置了最大宽度，然后处理所需效果的单元格大小。

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

不可否认的是，这并不能给您一个单元格的“最大”宽度，但它确实可以提供一些控制方法，可能可以代替此类选项。不确定它是否适合您的需求。我知道它对于我们的情况起作用，我们希望页面中的导航栏可以在一定程度上缩放，以适应所有这些宽屏幕。

- Damon

这是一个无效回答。它根本没有解决OP提出的问题。 - corwin.amber

1

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

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>

- dov.amir

0

我找到的解决方案是在 td 内部使用一个 div，并设置以下 CSS 属性：

max-width: 300px; // Desired max width
width: max-content;

你可以将不同的的宽度设置为100%，这样它将占据表格中剩余的空间。

- Andrei15193

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- superphonic · Accepted Answer

我知道这是一个老问题，但现在可以通过在表格标签上使用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/