Html 如何使用百分比设置表格单元格的最大宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8465385/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I set the max-width of a table cell using percentages?
提问by Leo Jiang
<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?
以上是行不通的。如何使用百分比设置表格单元格的最大宽度？
采纳答案by Jukka K. Korpela
According to the definition of max-widthin the CSS 2.1 spec, “the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.” So you cannot directly set max-width on a td element.
根据CSS 2.1 规范中 max-width的定义，“'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
如果您只想让第二列最多占据 67%，那么您可以将宽度（实际上是表格单元格的最小宽度）设置为 33%，例如在示例中
td:first-child { width: 33% ;}
Setting that for both columns won't work that well, since it tends to make browsers give the columns equal width.
为两列设置它不会很好地工作，因为它往往会使浏览器使列的宽度相等。
回答by superphonic
Old question I know, but this is now possible using the css property table-layout: fixedon the table tag. Answer below from this question CSS percentage width and text-overflow in a table cell
我知道老问题，但现在可以使用table-layout: fixedtable 标签上的css 属性。从这个问题下面回答表格单元格中的 CSS 百分比宽度和文本溢出
This is easily done by using table-layout: fixed, but a little tricky because not many people know about this CSS property.
这很容易通过使用 完成table-layout: fixed，但有点棘手，因为没有多少人知道这个 CSS 属性。
table {
width: 100%;
table-layout: fixed;
}
See it in action at the updated fiddle here: http://jsfiddle.net/Fm5bM/4/
在此处更新的小提琴中查看它的实际效果：http: //jsfiddle.net/Fm5bM/4/
回答by Damon
I know this is literally a year later, but I figured I'd share. I was trying to do the same thing and came across this solution that worked for me. We set a max width for the entire table, then worked with the cell sizes for the desired effect.
我知道这实际上是一年后，但我想我会分享。我试图做同样的事情并遇到了这个对我有用的解决方案。我们为整个表格设置了最大宽度，然后使用单元格大小来获得所需的效果。
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.
将表格放在自己的 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>
Then in your styles put:
然后在您的样式中输入：
#tablediv {
width:90%;
min-width:800px
max-width:1500px;
}
.tdleft {
width:20%;
min-width:200px;
}
Admittedly, this does not give you a "max" width of a cell per se, but it does allow some control that might work in-lieu of such an option. Not sure if it will work for your needs. I know it worked for our situation where we want the navigation side in the page to scale up and down to a point but for all the wide screens these days.
诚然，这并没有给你一个单元格本身的“最大”宽度，但它确实允许一些可能代替这种选项的控制。不确定它是否适合您的需求。我知道它适用于我们希望页面中的导航端放大和缩小到一个点的情况，但对于现在所有的宽屏幕。
回答by dov.amir
the percent should be relative to an absolute size, try this :
百分比应该相对于绝对大小，试试这个：
<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>
