Question

我需要制作一个基于表格的布局，并使我的表格宽度为550px。然后我加载了原始宽度为550px的图像，但在浏览器上我只有449px。我想要全宽。而且我在细胞之间也有额外的空间。

<table style="width:550px;margin:0 auto;" cellspacing="0" cellpadding="0" border="0">
            <tr style="margin:0; padding:0;">
                <td style="font-size:12px; line-height: 12px; width: 100%; text-align: right; color:#5A99B1;">Click <b>here</b> for the online version</td>
            </tr>
            <tr>
                <td style="width:100%; height:10px;" cellspacing="0" cellpadding="0">
                    <img style="width: 100%;" src="border-top.png" />
                </td>
            </tr>
            <tr>
                <td style="width:50%; background-color:white;">
                    <img src="brugadalogo.png" />
                </td>
                <td style="width:50%; background-color:white; text-align: right;">
                    <img src="msdlogo.png" />
                </td>
            </tr>
        </table>

Answer 1

您的表格列不均匀。你有3行，前两行有1列，最后一列有2列。即使你有正确的百分比，最好还是均匀分配。如所有3行都有或“取空间”2列。

我的意思是，不应使用宽度，而应使用colspan。同时从图像中删除宽度，如果你想要它的原始大小，它应该默认得到它。

<table style="width:550px;margin:0 auto;" cellspacing="0" cellpadding="0" border="0">
            <tr style="margin:0; padding:0;">
                <td **colspan="2"** style="font-size:12px; line-height: 12px; text-align: right; color:#5A99B1;">Click <b>here</b> for the online version</td>
            </tr>
            <tr>
                <td **colspan="2"** style="height:10px;" cellspacing="0" cellpadding="0">
                    <img src="border-top.png" />
                </td>
            </tr>
            <tr>
                <td style="background-color:white;">
                    <img src="brugadalogo.png" />
                </td>
                <td style="background-color:white; text-align: right;">
                    <img src="msdlogo.png" />
                </td>
            </tr>
        </table>

希望这能解决您的问题。

为什么我的图片没有加载到全尺寸？

1 个答案: