Question

我有一个包含内容的表格，我无法弄清楚如何对齐表格内的跨度内容。

这里粘贴了2张图片。第1张图片是实际结果，第2张图片是想要的结果。我想这解释了所有......

enter image description here

CODE：

<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-color: #d3d3d3;">
            <td colspan="2" style="padding: 5px; font-weight: bold;">Order Details</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="padding: 5px 0px 0px 5px; font-weight: bold; border-right-width: 1px; border-right-style: solid; border-right-color: #d3d3d3; width: 60%;">Order ID: <span style="font-weight: normal;text-align">#YCKY141</span>

            </td>
            <td style="padding-left: 20px; font-weight: bold;">Email: <span style="font-weight: normal;">wyz@ymca.com</span></td>
        </tr>
        <tr>
            <td style="padding-left: 5px; font-weight: bold; border-right-width: 1px; border-right-style: solid; border-right-color: #d3d3d3; width: 60%;">Date: <span style="font-weight: normal;">28/03/2014</span>

            </td>
            <td style="padding-left: 20px; font-weight: bold;">Telephone: <span style="font-weight: normal;">XXX-XXX-XXXX</span>

            </td>
        </tr>
        <tr>
            <td style="padding-left: 5px; font-weight: bold; border-right-width: 1px; border-right-style: solid; border-right-color: #d3d3d3; width: 60%;">Payment Method: <span style="font-weight: normal;">On Invoice</span>
            </td>
        </tr>
        <tr>
            <td style="padding: 0px 0px 5px 5px; font-weight: bold; border-right-width: 1px; border-right-style: solid; border-right-color: #d3d3d3; width: 60%;">Shipping Method: <span style="font-weight: normal;">Royal Mail</span>

            </td>
            <td style="padding-left: 20px;"></td>
        </tr>
    </tbody>
</table>

Answer 1

您必须对桌面进行一些改动。

查看 Demo

<强> 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-color: #d3d3d3;">
            <td colspan="2" style="padding: 5px; font-weight: bold;">Order Details</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="border-right-style: solid; border-right-color: #d3d3d3; border-width:1px">
                <table>
                    <tr>
                        <td style="padding: 5px 0px 0px 5px; font-weight: bold; ; width: 60%;">Order ID: 

                        </td>
                        <td style="padding-left: 20px;"><span style="font-weight: normal; text-align">#YCKY141</span></td>
                    </tr>
                    <tr>
                        <td style="padding: 0px 0px 5px 5px; font-weight: bold; width: 60%;">Date: 

                        </td>
                        <td style="padding-left: 20px;"><span style="font-weight: normal;">28/03/2014</span></td>
                    </tr>
                    <tr>
                        <td style="padding: 0px 0px 5px 5px; font-weight: bold; width: 60%;">payment Method: 

                        </td>
                        <td style="padding-left: 20px;"><span style="font-weight: normal;">OnInvoice</span></td>
                    </tr>
                    <tr>
                        <td style="padding: 0px 0px 5px 5px; font-weight: bold; width: 60%;">Shipping Method: 

                        </td>
                        <td style="padding-left: 20px;"><span style="font-weight: normal;">Royal Mail</span></td>
                    </tr>


                </table>
            </td>
            <td style="vertical-align:top">
                <table>
                    <tr>
                        <td>Email :
                        </td>
                        <td>
                            <span style="font-weight: normal;">wyz@ymca.com</span>
                        </td>
                    </tr>
                    <tr>
                        <td>Telephone: 
                        </td>
                        <td>
                            <span style="font-weight: normal;">XXX-XXX-XXXX</span>
                        </td>
                    </tr>

                </table>
            </td>
        </tr>

    </tbody>
</table>

Answer 2

您只需要使用正确的表格布局：

<table>
    <thead>
        <tr>
            <td colspan="4" class="headline">Order Details</td>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td class="first">Order ID:</td>
            <td class="second">#YCKY141</td>
            <td class="third"></td>
            <td class="fourth"></td>
        </tr>
        <tr>
            <td class="first">Date:</td>
            <td class="second">2014-03-28</td>
            <td class="third">Email</td>
            <td class="fourth">wyz@ymca.com</td>
        </tr>
    </tbody>
</table>

CSS：

body {
    font-family: Arial;
    font-size: 12px;
}

table {
    border: 1px solid #000;
    border-collapse: collapse;
}

.headline {
    background-color: #d3d3d3;
    font-weight: bold;
    padding: 5px;
}

.first,
.third {
    font-weight: bold;
    padding: 0 5px;
    width: 20%;
}

.second,
.fourth {
    width: 30%;
}

.third {
    border-left: 1px solid #d3d3d3;
}

演示：http://jsfiddle.net/kZ7Hj/

Answer 3

使用span和display:inline-block包裹每个密钥（订单ID，日期等）。

示例：

<span style="display:inline-block;width:40%;">Order Id</span>

~~编辑：确保在完成实验后删除内联样式。它将使维护和调试变得更加容易。~~刚刚看到您对电子邮件模板的评论。我有一段时间没有看过电子邮件客户端的css支持，可能不支持display:inline-block。

Answer 4

我不确定这是否是你想要的，但我申请了：

<div style="width:200px; display:inline-block;">..</div>

在标签上，似乎对齐得很好。

您可以在此处找到一个示例：http://jsfiddle.net/LxD9N/12/

Answer 5

将<span>元素替换为额外的<td>元素并对齐。

对齐Span的内容

5 个答案: