html - 对齐 Span 的内容

Question

我有一个包含内容的表格，但我不知道如何对齐表格内跨度的内容。

HERE IS THE FIDDLE

这里粘贴了 2 张图片。第一张图片是实际结果，第二张图片是期望的结果。我认为这可以解释一切......

代码:

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