html - 如何使列的宽度适合 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>

等等 - 我相信你明白了。这可能会阻止它在兼容性 View 中自动显示(如果有问题)。

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