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>

嵌套表与不同的alingnment

2 个答案: