IE7中的HTML表格太宽答案

【问题标题】：HTML table too wide in IE7IE7中的HTML表格太宽
【发布时间】：2012-07-01 10:33:01
【问题描述】：

我有一张在 Chrome、IE8 和 IE9 中显示良好的表格。然而，在 IE7 中，表格最终比它的内容宽得多（100% 的包含元素？）。如何使表格在 IE7 和 IE6 中仅与其内容一样宽（并在较新的浏览器中继续正常显示）？

这是桌子：

<table class="SisSubDetailTable">
    <tbody>
        <tr>
            <td>Date:</td><td>10-16-11</td><td>SOID:</td><td>SUST — Sustaining                                                                                          </td>
        </tr>
        <tr>
            <td>Status:</td><td>25 characters' worth of data</td><td>Work Order:</td>
            <td>     </td>
        </tr>
        <tr>
            <td>Company:</td><td>6K8  — KAPCO</td><td>Sub:</td><td>9999 </td>
        </tr>
        <tr>
            <td>Store:</td><td>34 characters' worth of data</td><td>Export Price:</td>
            <td>$0.00</td>
        </tr>
        <tr>
            <td>Class:</td><td>26 characters' worth of data</td><td>Control Ship:</td>
            <td>N</td>
        </tr>
    </tbody>
</table>

下面的 CSS 似乎使单元格变窄了，但整个表格仍然比 400px 宽得多：

table.SisSubDetailTable
{
    width: 400px;
}

table.SisSubDetailTable td
{
    border-width: 0;
    width: 100px;
}

【问题讨论】：

实际上，上面的 CSS 使文本换行，就好像单元格实际上是 100px 宽一样，但单元格边框仍然比文本宽一点。奇怪。
另一件有趣的事：其中没有数据的单元格实际上并没有出现在 IE7 中，尽管我认为这不会使单元格和表格变得如此宽。不过，这是一个有趣的观察结果。

标签： html css html-table internet-explorer-7

【解决方案1】：

你应该在 css 中设置它的宽度属性。使用猜测和检查来确定你想要多大。

【讨论】：

我不知道宽度应该提前多少。我不能让表格和数据一样窄吗？
对不起，没有缩水的规则，你必须测试一下，试试 300px，然后调整。应该只需要一分钟。
看起来像设置宽度以及使用 !important 设置宽度。我想我会为早期的浏览器加载一个不同的 CSS 文件，但让新的浏览器顺其自然。谢谢。

【解决方案2】：

如果您还没有这样做，请以像素为单位设置值并避免使用其他单位。

【讨论】：