CSS 嵌套table 居中问题_html/css_WEB-ITnose-html教程-PHP中文网

CSS 嵌套table 居中问题_html/css_WEB-ITnose

WBOY

发布： 2016-06-24 12:18:02

原创

1330 人浏览过

按常理来说，只要在父table的tr 或td里设置text-align:center就能居中了。可是VS设计器里居中了，浏览器居中不了。ff里不居中还可以理解，连IE也不能就费解了。

<tr style="text-align:center">                <td>                    <table style="border-collapse:collapse">                        <tr style="text-align:center;">                            <td style="border:solid #000 1px">单位工程数量</td>                            <td style="border:solid #000 1px">总建筑面积</td>                            <td style="border:solid #000 1px">单价（元/平）</td>                            <td style="border:solid #000 1px">小计</td>                        </tr>                        <tr>                            <td style="border:solid #000 1px"><input id="txt_UnitNum" type="text" class="txtInTab" runat="server" style="text-align:center; background-color: #e6eae9;"/></td>                            <td style="border:solid #000 1px"><input id="txt_AreaNum" type="text" class="txtInTab"  runat="server" style="text-align:center; background-color: #e6eae9;"/></td>                            <td style="border:solid #000 1px"><input id="txt_UnitPrice" type="text" class="txtInTab" runat="server" style="text-align:center; background-color: #e6eae9"/></td>                            <td style="border:solid #000 1px"><input id="txt_Total" type="text" class="txtInTab" readonly="readonly" runat="server" style="text-align:center; background-color: #e6eae9"/></td>                        </tr>                        <tr>                            <td style="text-align:center;border:solid #000 1px">合计</td>                            <td colspan='2' style="border:solid #000 1px;">大写：<input id="txt_Cap" type="text" class="txtInTab" readonly="readonly" runat="server" style="width: 255px; background-color: #e6eae9" /></td>                            <td style="border:solid #000 1px"><input id="Text9" type="text" class="txtInTab" readonly="readonly" runat="server" style="background-color: #e6eae9"/></td>                        </tr>                    </table>                </td>            </tr>

登录后复制

如果有人说是父元素继承的话，那我父元素里没写什么东西
外层table里就多了一句

style="margin-left:auto; margin-right:auto"

登录后复制

body就更谈不上了。只设置了背景和前景色

    body     {        font: normal 9pt auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;        color: #4f6b72;        background: #E6EAE9;        margin:0 auto;    }

登录后复制

但里面的table就是居中不了，麻烦帮我分析下~谢谢

回复讨论(解决方案)

在线求解！哪怕是一点点建议也行啊~

饿别在tr里面加center

加在 td里面 style="text-align:center"

加在 td里面 style="text-align:center" 效果一样。早试过了

最外层在个div

这样就居中了

<tr style="text-align:center">                <td>                    <table style="text-align:center;border-collapse:collapse">                        <tr style="text-align:center;">                            <td style="border:solid #000 1px">单位工程数量</td>                            <td style="border:solid #000 1px">总建筑面积</td>                            <td style="border:solid #000 1px">单价（元/平）</td>                            <td style="border:solid #000 1px">小计</td>                        </tr>                        <tr>                            <td style="border:solid #000 1px"><input id="txt_UnitNum" type="text" class="txtInTab" runat="server" style="text-align:center; background-color: #e6eae9;"/></td>                            <td style="border:solid #000 1px"><input id="txt_AreaNum" type="text" class="txtInTab"  runat="server" style="text-align:center; background-color: #e6eae9;"/></td>                            <td style="border:solid #000 1px"><input id="txt_UnitPrice" type="text" class="txtInTab" runat="server" style="text-align:center; background-color: #e6eae9"/></td>                            <td style="border:solid #000 1px"><input id="txt_Total" type="text" class="txtInTab" readonly="readonly" runat="server" style="text-align:center; background-color: #e6eae9"/></td>                        </tr>                        <tr>                            <td style="text-align:center;border:solid #000 1px">合计</td>                            <td colspan='2' style="border:solid #000 1px;">大写：<input id="txt_Cap" type="text" class="txtInTab" readonly="readonly" runat="server" style="width: 255px; background-color: #e6eae9" /></td>                            <td style="border:solid #000 1px"><input id="Text9" type="text" class="txtInTab" readonly="readonly" runat="server" style="background-color: #e6eae9"/></td>                        </tr>                    </table>                </td>            </tr>

登录后复制

在子table里面加上样式text-align:center就行了

按常理来说……
不能按常理啊

试一下