HTML固定列宽度不正确工作在MS Outlook

Question

我有以下两张表。列的宽度应该是125px的固定宽度(在真实的表格中，有更多的列)。
我希望表1中的列与表2中的列的宽度相匹配，但是当我在Outlook电子邮件中查看时，它们没有对齐。有什么建议吗?

下面的代码:

表1

‘Header Row
<table width:1000px>
<tr style=“width: 1000px;">
<td style=“width: 125px; ">
<span style=“font-size: 12px; ">Col1Title</span></td>
<td  style=“width:125px; ">
<span style=“font-size: 12px; ”>Col2Title</span></td>
‘Details
<tr >
<td style=“ height: 15px; “>
<span style=“line-height: 100%; ”> & Col1Details & </span></td>
<td style=“height: 15px;”>
<span style=“line-height: 100%; ”> & Col2Details & </span></td>

表2

‘Header Row
<table width:1000px>
<tr >
<td style=“width: 125px;“>
<span> Table2_Col1Title</span></td>
<td  style=“width: 125px;
<span> Table2_Col2Title </span></td>
‘Details
<tr >
<td style=“ height: 15px; “>
<span style=“line-height: 100%;”> & Table2_Col1Details & </span></td>
<td style=“ height: 15px;”>
<span style=“line-height: 100%; ”> & Table2_Col2Details& </span></td>

Answer 1

这里有几件事需要处理:

1. 看起来好像你正在使用Word来编辑你的HTML，因为在你的HTML中包含了像这样的"智能"引号。Word可能是你编辑HTML最糟糕的选择;你最好下载像notepad++这样的东西，或者甚至使用常规的旧记事本来编辑你的HTML。

2. 你不能让你的<td>标签的宽度加起来小于表的宽度;<td>标签只会以不寻常的方式扩展以适应表的宽度。

3. 如果你想有两个表，一个在另一个下面，假设这是一个HTML电子邮件由于你的问题提到Outlook，你应该把一切包裹在一个外部表，有一个<tr> &每个内部表都有<td>，并这样布局。使用HTML电子邮件，你真的必须把你所知道的HTML和CSS的一切都扔到窗外，然后写老派风格

4. Outlook在呈现HTML电子邮件方面非常糟糕。它可能永远不会是完美的，所以不要因此而自责。

也就是说，我对你的HTML进行了攻击，在下面:

<table style="width: 1000px;">
    <tr>
        <td>
            <table style="width: 1000px;">
                <tr>
                    <td style="width: 125px;">
                        <span style="font-size: 12px;">Table1_Col1Title</span>
                    </td>
                    <td style="width: 125px;">
                        <span style="font-size: 12px; ">Table1_Col2Title</span>
                    </td>
                </tr>
                <tr>
                    <td style="height: 15px;">
                        <span style="line-height: 100%; "> & Table1_Col1Details & </span>
                    </td>
                    <td style="height: 15px;">
                        <span style="line-height: 100%; "> & Table1_Col2Details & </span>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <table style="width:1000px;">
                <tr>
                    <td style="width: 125px;">
                        <span style="font-size: 12px;">Table2_Col1Title</span>
                    </td>
                    <td style="width: 125px;">
                        <span style="font-size: 12px;">Table2_Col2Title</span>
                    </td>
                </tr>
                <tr>
                    <td style="height: 15px;">
                        <span style="line-height: 100%;"> & Table2_Col1Details & </span>
                    </td>
                    <td style="height: 15px;">
                        <span style="line-height: 100%;"> & Table2_Col2Details & </span>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>