Question

我在HTML中定义了如下表：

<table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
    <tr style="font-size:small;">
        <th colspan="2">Name</th>
        <th>Abbr.</th>
        <th style="width:100%;">&nbsp;</th>
    </tr>
    <tr>
        <td style="padding:5px;text-align:centered;width:48px;">
            <img src="..." style="max-width:32px" />
        </td>
        <td style="text-align:left;white-space:nowrap;">Some Text</td>
        <td>ABC</td>
        <td>&nbsp;</td>
    </tr>
</table>

当图像尺寸为32px或更小时，所有内容都可以呈现。当图像较大时，它会按预期调整为32px，但表格单元格保持原始宽度。例如，如果原始图像为100x100，则图像大小调整为32x32，但表格单元格的宽度为100px。

我缺少什么，以便无论图像的原始大小如何，表格单元格都会以正确的宽度渲染？

UPDATE 我更新了原始标记以显示完整的表格布局。

Answer 1

我只能在IE8中重现您的问题：http://jsfiddle.net/Dtc5m/

要在IE8中修复它，您可以添加table-layout: fixed。

请参阅： http://jsfiddle.net/Dtc5m/1/

在评论中进一步讨论后，接受的解决方案原来是：

将img包裹在div中，并提供 div width等于max-width img。请参阅：http://jsfiddle.net/Dtc5m/6

Answer 2

此页面在Google Chrome中正确显示，但在IE中无法显示。

通常的原因是没有设置doctype，当我添加它时，我得到了正确的显示。

例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head></head>
<body>
<table border='0' cellpadding='0' cellspacing='0' style='width:100%;'>
    <tr>
        <td style='padding:5px;text-align:center;width:48px;'>
            <img src='...' style='max-width:32px;' />
        </td>
        <td style='padding:5px;white-space:nowrap;'>Some text</td>
    </tr>
</table>
</body>
</html>

有关详细信息，请参阅http://www.w3.org/QA/Tips/Doctype

希望这会有所帮助：）

CSS：调整图像大小时表格单元格不会折叠

2 个答案: