Question

我编写了一个表，但由于某种原因，右列没有与左列对齐。

左栏略微向下放置。这是一个小提琴：http://jsfiddle.net/5Me4L/

代码：

<table width='620'>
    <tr>
        <td width='310'>
            <span style='font-size:21px; font-family:Arial, Helvetica, sans-serif; color:#00abbd; font-weight:bold'>Pay Monthly</span>
            <table width='310' cellpadding='6' cellspacing='0' border='0' style='border-color:#00abbd; border-width:0px; border-style:solid; padding:3px'>
                <tr bgcolor='#eeeeee'><td width='160'><p class='rates' style='color:#00abbd;'><strong>Call to Argentina</strong></p></td><td><p class='rates'>&euro; 3.88 /min</p></td></tr>
                <tr><td><p class='rates' style='color:#00abbd;'><strong>Call to Malta</strong></p></td><td><p class='rates'>&euro; 3.40/min</p></td></tr>
                <tr bgcolor='#eeeeee'><td><p class='rates' style='color:#00abbd;'><strong>Call to Zone 4 </strong> </p></td><td><p class='rates'>&euro; 3.88 /min</p></td></tr>
                <tr><td><p class='rates' style='color:#00abbd;'><strong>Calling other Zones</strong></p></td><td><p class='rates'>&euro; 4.00 /min</p></td></tr>
                <tr bgcolor='#eeeeee'><td><p class='rates' style='color:#00abbd;'><strong>Receiving Calls</strong></p></td><td><p class='rates'>&euro; 1.46 /min</p></td></tr>
                <tr><td>
                    <p class='rates' style='color:#00abbd;'><strong>Data</strong></p></td><td><p class='rates'> &euro; 17.48</p>
                    </td></tr>
                <tr bgcolor='#eeeeee'><td><p class='rates' style='color:#00abbd;'><strong>SMS</strong></p></td><td><p class='rates'>&euro; 0.39</p></td></tr>
                <tr><td><p class='rates' style='color:#00abbd;'><strong>MMS</strong></p></td>
                    <td><p class='rates'>&euro; 0.22 + €17.48</p></p></td></tr>
            </table> 
            <td width='310'>
                <span style='font-size:21px; font-family:Arial, Helvetica, sans-serif; color:#00abbd; font-weight:bold'>Pay Monthly</span>
                <table width='310' cellpadding='6' cellspacing='0' border='0' style='border-color:#00abbd; border-width:0px; border-style:solid; padding:3px'>
                    <tr bgcolor='#eeeeee'><td width='160'><p class='rates' style='color:#00abbd;'><strong>Call to Argentina</strong></p></td><td><p class='rates'>&euro; 3.88 /min</p></td></tr>
    </tr>
</table>

这应该是它的样子：

enter image description here

Answer 1

向vertical-align:top添加tr媒体资源：

tr {
    vertical-align: top;
}

请参阅JSFiddle

Answer 2

您需要在表格单元格上使用垂直对齐方式，如下所示：

<td width='310' valign="top">

Answer 3

在你的第二个我修改它。这将迫使表数据位于顶部。但是有更好的方法来编写表格。您可以查看他的页面 - http://www.w3schools.com/html/html_tables.asp

Answer 4

将垂直对齐：top属性添加到您的td

<强> DEMO

<强> CSS

td {
    vertical-align:top;
}

表样式问题

4 个答案: