如何使列的宽度适合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="1%"更换width="1px"。但是，表格宽度将跨越父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>