首页 文章

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

提问于
浏览 次
8

我的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，如下所示 .

Firefox display

但是，在IE 9中它没有按预期工作，如图所示 .

IE 9 display

我试图用 width="1%" 替换 width="1px" . 但是表格宽度将跨越父div的最大宽度 .

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

html css internet-explorer html-table

2 回答

  • 13

    我刚刚在我的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是如此愚蠢，您将不得不关闭兼容性视图（如果它在页面上启用），因为域中的所有页面都将在兼容性视图中查看 .

    回复于
  • 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>
    回复于

相关问题