Question

我需要为电子邮件设置一个HTML表格，其中每列都有一个设置的宽度。

左栏只是一张图片，右边是文字。我设置了td宽度，但无论如何，td渲染为600px宽。

可以查看电子邮件here

这是代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="Fitzgerald Description">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>
        Fitzgerald Email
    </title>
</head>
<body bgcolor="#ffffff" style="margin:0; padding:0; width:100% !important; background-color:#f8f6f2; font-family:Calibri, 'Helvetica Neue', Helvetical, Arial, Geneva, clean, sans-serif;">
<table bgcolor="#ffffff" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px; max-width:600px; margin:0 auto 0 auto;" width="600">
    <tbody>
        <tr>
            <td align="center" style="text-align:center;" width="600">
                <img align="none" alt="Fitzgerald Header" border="0" src="http://i.imgur.com/MLEroOA.jpg" style="width: 600px;" width="600">
            </td>
        </tr>
        <tr>
            <td width="244">
            <img align="none" alt="Fitzgerald Pictures" border="0" src="http://i.imgur.com/nn93sj7.jpg" style="width:244px;" width="244">
            </td>
            <td width="356">
            <p style="font-size:18px; color:##71032d;">
                Going, Going ...
            </p>

            </td>
        </tr>
        <tr>
            <td align="center" width="600">
                <div style="font-size:12px; color:#9d9d9c">
                288 Macon Ave. | Asheville, North Carolina 28804 | 828-251-1140 | <a href="thefitzgeraldatgrovepark.com" style="color:#9d9d9c; text-decoration: none">thefitzgeraldatgrovepark.com</a>
                </div>
            </td>
        </tr>
        <tr>
            <td align="left" width="600">
                <p style="font-size:12px; color:#9d9d9c; margin-left:18px; margin-right:18px;">
                Sales by Beverly-Hanks &amp; Associates, licensed in North Carolina. This is not an offer to sell to residents of any state or province in which legal requirements have not been fulfilled. This offer is void where prohibited by law. All features, services, amenities, descriptions and other information set forth in this communication are subject to change at any time without notice. The features, services, amenities and other privileges of owners of a Residence at The Fitzgerald are limited to those included in the Purchase Agreement and the Declaration of Condominium for The Fitzgerald Condominium. Certain mandatory dues, assessments, fees and charges apply to Residences at The Fitzgerald in connection with services, features and amenities described herein, contact a Fitzgerald sales professional for details. Depictions include amenities and furniture in the Model Homes which are not included in the sale of a Residence at The Fitzgerald.
                </p>
            </td>
        </tr>
        <tr>
            <td align="center" width="600" height="10"></td>
        </tr>
    </tbody>
</table>
</body>
</html>

Answer 1

您可以在这种情况下使用style="display:inline-block"，并使用float:left，正如Leo Abraham所述。

Answer 2

添加样式

float:left

和TD一起尝试。的 DEMO

Answer 3

每行中的列数不均匀。在您希望跨越两列的td元素上，指定要跨越的列数的colspan属性。

JSFiddle

<td align="center" style="text-align:center;" width="600" colspan="2">

编辑：

如果没有此colspan属性，则每个后续行的第一列将假定列中最宽单元格的宽度 - 在这种情况下是第一行的600px宽第一列。

Answer 4

我只是想说明在HTML5中td宽度已经折旧了。我建议使用css。

td {width：244px; }

Answer 5

尝试将此样式添加到您的表格中。

table-layout:fixed;

默认值为“auto”，我认为这是（奇怪的）更新行为，与1994 - 2004年表格的经典方式相比。

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

我仍然不确定为什么“auto”强制“td”占据整行，然后内容远小于表的宽度。 “自动”引擎是否有一些故障或奇怪的行为？不确定。

TD占据整行宽度

5 个答案: