How can I set the max-width of a table cell using percentages?

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


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

The above does not work. How can I set the max-width of a table cell using percentages?

257811 次浏览
小开

百分比应该是相对于一个绝对大小, 试试这个:

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>

小开
最佳答案

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

If you just want the second column to take up at most 67%, then you can set the width (which is in effect minimum width, for table cells) to 33%, e.g. in the example case

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

为两个列都设置这个值不会起到很好的作用，因为它往往会使浏览器给列赋予相同的宽度。

小开

我知道这已经是一年后的事了但我觉得我应该和大家分享一下。我也在尝试做同样的事情，然后发现了一个对我有效的解决方案。我们为整个表设置了一个最大宽度，然后使用单元格大小达到预期效果。

Put the table in its own div, then set the width, min-width, and/or max-width of the div as desired for the entire table. Then, you can work and set width and min-widths for other cells, and max width for the div effectively working around and backwards to achieve the max width we wanted.

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

无可否认，这并没有给出单元格本身的“最大”宽度，但是它确实允许一些可以代替这种选项的控制。不确定它是否能满足你的需要。我知道它对我们的情况下，我们希望在页面的导航端放大和缩小到一个点，但所有的宽屏幕这些天。

小开

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

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

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

See it in action at the updated fiddle here: http://jsfiddle.net/Fm5bM/4/


提交答案