如何使列的宽度适合其在 HTML 表格中的内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8305140/
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 to make width of a column fit to its contents in HTML table?
提问by Bob
I have the following table in my HTML:
我的 HTML 中有下表：
<div style="max-width:700px;">
<table border="1">
<tr><td colSpan="2">this is a loooooooooooooooong text</td></tr>
<tr><td width="1px">a:</td><td >b</td></tr>
<tr><td width="1px">c:</td><td >d</td></tr>
</table>
<div>
I want the first column width in the second and third row to just fit the content length (that is why I put width="1px"there). In the mean while, I want to table width to just fit the length of the longest content in the table (which is the first row) instead of spanning to the max-width of its bounding div.
我希望第二行和第三行中的第一列宽度正好适合内容长度（这就是我放在width="1px"那里的原因）。同时，我希望表格宽度仅适合表格中最长内容的长度（即第一行），而不是跨越其边界 div 的最大宽度。
It works in Firefox as shown below.
它在 Firefox 中工作，如下所示。
However, in IE 9 it does not work as expected, as shown.
但是，在 IE 9 中它没有按预期工作，如图所示。
I tried to replace width="1px"with width="1%". But then the table width will span to the max-width of the parent div.
我试图替换width="1px"为width="1%". 但随后表格宽度将跨越父 div 的最大宽度。
Does anyone know how to fix it in IE?
有谁知道如何在IE中修复它？
回答by dan
I have just tested in my IE9, and setting the width to 1px works. But it displays as you presented above in compatibility mode. Have you declared your doctype and all other fun stuff?
我刚刚在我的 IE9 中进行了测试，并将宽度设置为 1px 有效。但它在兼容模式下显示为您在上面显示的内容。你有没有声明过你的文档类型和所有其他有趣的东西？
It might be because you are using older methods to display the table. You could try styling the table with borders and so on in CSS - such as:
这可能是因为您使用的是较旧的方法来显示表格。您可以尝试在 CSS 中使用边框等设置表格样式 - 例如：
table, td, tr, th{
border:1px solid #f0f;
}
.onepx{
width:1px;
}
<div style="max-width:700px;">
<table>
<tr><td colspan="2">this is a loooooooooooooooong text</td></tr>
<tr><td class="onepx">a:</td><td>b</td></tr>
<tr><td class="onepx">c:</td><td>d</td></tr>
</table>
<div>
and so forth - I am sure you get the idea. this might stop it automagically displaying in compatibility view (if it is the problem).
等等 - 我相信你明白了。这可能会阻止它在兼容性视图中自动显示（如果是问题）。
And finally, because IE9 is so stupid, you will have to turn off the compatibility view (if it is enabled on the page), because all pages within the domain will be viewed in compatibility view.
最后，因为IE9太蠢了，你将不得不关闭兼容性视图（如果在页面上启用），因为域内的所有页面都将在兼容性视图中查看。
回答by Oh Chin Boon
You mentioned that you have tried setting it to 1%, did you set the other to 99%?
您提到您已尝试将其设置为 1%，您是否将其他设置为 99%？
<tr><td width="1%">a:</td><td width="99%">b</td></tr>
<tr><td width="1%">c:</td><td width="99%">d</td></tr>
