如何使列的宽度适合其在 HTML 表格中的内容？

Posted 2023-03-05

【中文标题】如何使列的宽度适合其在 HTML 表格中的内容？

【英文标题】：How to make width of a column fit to its contents in HTML table?

【发布时间】：2012-01-08 11:03:42

【问题描述】：

我的 html 中有下表：

<div style="max-width:700px;">
    <table border="1">
        <tr><td colSpan="2">this is a loooooooooooooooong text</td></tr>
        <tr><td >a:</td><td >b</td></tr>
        <tr><td >c:</td><td >d</td></tr>
    </table>
<div>

我希望第二行和第三行中的第一列宽度恰好适合内容长度（这就是我将width="1px" 放在那里的原因）。同时，我希望表格宽度恰好适合表格中最长内容的长度（即第一行），而不是跨越其边界 div 的最大宽度。

它可以在 Firefox 中运行，如下所示。

但是，在 IE 9 中，它无法按预期工作，如图所示。

我尝试将width="1px" 替换为width="1%"。但随后表格宽度将跨越到父 div 的最大宽度。

有谁知道如何在 IE 中修复它？

【问题讨论】：

are shrink-to-fit table cells possible? 的可能重复项

【参考方案1】：

我刚刚在我的 IE9 中进行了测试，将宽度设置为 1px 可以。但它会显示为您在上面以兼容模式 呈现的那样。你声明了你的 doctype 和所有其他有趣的东西吗？

这可能是因为您使用较旧的方法来显示表格。您可以尝试在 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>

等等 - 我相信你明白了。这可能会阻止它自动显示在兼容性视图中（如果是问题的话）。

最后，因为 IE9 太笨了，你将不得不关闭兼容性视图（如果在页面上启用的话），因为域内的所有页面都将在兼容性视图中查看。

【讨论】：

谢谢。添加 doctype 声明解决了 IE 中的问题。

我现在有了新情况。我无法关闭 IE 中的兼容性视图，因为页面的其他部分必须在兼容性视图中查看。那么，有没有办法在不关闭 IE9 的兼容性视图的情况下完成像 Firefox 中的样式？

是的。确保您的代码都经过良好验证且结构良好。确保您的页面在 validator.w3.org

处没有错误

【参考方案2】：

您提到您尝试将其设置为 1%，您是否将另一个设置为 99%？

<tr><td >a:</td><td >b</td></tr>
<tr><td >c:</td><td >d</td></tr>

【讨论】：

这行不通，因为这会将其设置为 700 像素的 99%。