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

Question

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

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

它在 Firefox 中的工作原理如下所示。

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

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

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

Answer 1

我刚刚在 IE9 中测试过，将宽度设置为 1px 可以。但它会按照您上面在兼容模式下呈现的方式显示。你声明了你的文档类型和所有其他有趣的东西吗？

这可能是因为您使用旧方法来显示表格。您可以尝试在 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 太愚蠢了，您将不得不关闭兼容性视图（如果在页面上启用了它），因为域内的所有页面都将在兼容性视图中查看。

Answer 2

你提到你曾尝试将其设置为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>