不同排列方式的嵌套表

Question

我有嵌套表，我想要Table1居中对齐和Table2左对齐，但它不适合我。

这是我的代码。

<table id="contenttable" width="600" align="left" cellpadding="0" cellspacing="0" border="0" style="background-color:#FFFFFF; text-align:center !important; margin-top:0 !important; margin-right: auto !important; margin-bottom:0 !important; margin-left: auto !important; border:none; width: 100% !important; max-width:600px !important;">
<tr>
   <td width="100%">
       <table bgcolor="#FFFFFF" border="0" cellspacing="0" cellpadding="0" width="100%" align = "center">Table1 </table>
        <table bgcolor="#FFFFFF" border="0" cellspacing="0" cellpadding="0" width="100%" align = "left">Table2</table>
   </td>
</tr>

Answer 1

添加以下css将显示为您想要的效果。

#contenttable table {
    border: 1px solid;
    height: 20px;
    width: 50%;
}

你给两个表100%的宽度。把它弄小一点就会像你想要的那样。

您需要在<td>

中添加文本

JSFiddle

Answer 2

请试试这个

<table id="contenttable" width="600" align="center" cellpadding="0" cellspacing="0" border="1" style="background-color:#FFFFFF; text-align:center !important; margin-top:0 !important; margin-right: auto !important; margin-bottom:0 !important; margin-left: auto !important; border:none; width: 100% !important; max-width:600px !important;">
<tr>
    <td width="100%">
        <table bgcolor="#FFFFFF" border="1" cellspacing="0" cellpadding="0" width="100%" style="text-align: center;">
            <tr>
                <td>Table1 </td>
            </tr>
        </table>
        <table bgcolor="#FFFFFF" border="1" cellspacing="0" cellpadding="0" width="100%" style="text-align: left;">
            <tr>
                <td>
                    Table2
                </td>
            </tr>
        </table>
    </td>
</tr>
</table>