0

我需要为每列都有固定宽度的电子邮件设置 HTML 表格。

左栏只是一张图片，右栏是有文字的。我已经设置了 td 宽度，但无论如何 td 都会呈现为 600px 宽。

电子邮件可以在这里查看

这是代码

<!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>
4

5 回答 5

2

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

于 2013-08-26T05:03:30.713 回答
2

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

JSFiddle

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

编辑：

如果没有此colspan属性，则每个后续行的第一列都假定列中最宽单元格的宽度 - 在本例中为第一行的 600 像素宽的第一列。

于 2013-08-26T05:10:26.033 回答
1

添加样式

float:left

TD和尝试。演示

于 2013-08-26T04:58:27.807 回答
0

我只想说明 td 宽度在 HTML5 中已经贬值。我推荐使用css。

td { 宽度：244px; }

于 2013-08-26T05:10:14.897 回答
0

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

table-layout:fixed;

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

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

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

于 2017-01-26T19:17:31.210 回答