Question

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

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

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

Answer 1

我知道这个老问题，但现在可以使用表标记上的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/

Answer 2

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

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

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

设置两列的效果不会很好，因为它往往会使浏览器为列提供相等的宽度。

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;
}

不可否认，这并不会给你一个单元格的“最大”宽度，但它确实允许一些可能代替这种选项的控制。不确定它是否适合您的需求。我知道这对我们的情况很有用，我们希望页面中的导航面可以向上和向下缩放到某一点，但是对于所有宽屏幕来说都是如此。

Answer 4

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

<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>

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

4 个答案: