html - 如何使用百分比划分 HTML 表格

Question

我在我的网站中使用 HTML 模板来发送电子邮件，并且电子邮件中的一个部分使用 HTML 表格。

如何使用 HTML 获得以下输出

这是DEMO的 fiddle 我试过的

这是我的 HTML 代码

<table width="100%" cellspacing="3" cellpadding="0" style="border:1px solid black;border-collapse:collapse">
    <tbody>
        <tr>
            <td colspan="3" style="background-color:#d9eeff;"><strong>Order Details</strong>
            </td>
        </tr>
        <tr>
            <td> <strong>Order ID:</strong>

            </td>
            <td>XSL VALUE</td>
        </tr>
        <tr>
            <td> <strong>Date:</strong>

                <br />
                <br />
            </td>
            <td>XSL VALUE
                <br />
                <br />
            </td>
        </tr>
        <tr>
            <td> <strong>Payment Method:</strong>

                <br />
                <br />
            </td>
            <td>XSL VALUE
                <br />
                <br />
            </td>
        </tr>
        <tr>
            <td> <strong>Shipping Method:</strong>

                <br />
                <br />
            </td>
            <td>XSL VALUE
                <br />
                <br />
            </td>
        </tr>
    </tbody>
</table>

Answer 1

您需要更改 HTML 以将 colspan 设置为 2 并添加 thead 以保持正确的语义。除此之外，就像 HTML 电子邮件的乐趣一样，您可能最好应用 CS 内联...不寒而栗。

Demo Fiddle

HTML

<table width="100%" cellspacing="3" cellpadding="0" style="border:1px solid black;border-collapse:collapse;font-family:arial;font-size:12px;">
    <thead>
        <tr style='background:lightgray;'>
            <td colspan="2" style="padding:5px;font-weight:bold;">Order Details</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="padding:5px 0 0 5px;font-weight:bold;border-right:1px solid lightgray;width:50%;">Order ID: <span style='font-weight:normal;'>(value)</span>
            </td>
            <td style='padding-left:20px;'></td>
        </tr>
        <tr>
            <td style="padding-left:5px;font-weight:bold;border-right:1px solid lightgray;width:50%;">Date: <span style='font-weight:normal;'>(value)</span>
            </td>
            <td style='padding-left:20px;font-weight:bold;'>Email: <span style='font-weight:normal;'>(value)</span>
            </td>
        </tr>
        <tr>
            <td style="padding-left:5px;font-weight:bold;border-right:1px solid lightgray;width:50%;">Payment Method: <span style='font-weight:normal;'>(value)</span>
            </td>
            <td style='padding-left:20px;font-weight:bold;'>Telephone: <span style='font-weight:normal;'>(value)</span>
            </td>
        </tr>
        <tr>
            <td style="padding:0 0 5px 5px;font-weight:bold;border-right:1px solid lightgray;width:50%;">Shipping Method: <span style='font-weight:normal;'>(value)</span>
            </td>
            <td style='padding-left:20px;'></td>
        </tr>
    </tbody>
</table>