CSS 嵌套table 居中有关问题

CSS 嵌套table 居中问题
按常理来说，只要在父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
[解决办法]
最外层在个div
<div style="text-align:center">
<table border="1" cellpadding="1" cellspacing="1" style="margin-left:auto; margin-right:auto">
这样就居中了
[解决办法]

<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就行了
[解决办法]
按常理来说……
不能按常理啊

<tr>
  <td>
    <table align="center"></table>
  </td>
</tr>
试一下
[解决办法]
<table style=" width:100%;text-align:center;">
  <tr>
    <td><table style="border-collapse:collapse; width:100%;">
        <tr style="">
          <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>
[解决办法]
<tr style="text-align:center">
   <td>
        <table style="border-collapse:collapse； display:inline-table;">

给里面的table加上display:inline-table;就可以了。

之前不能居中应该是因为text-align不能作用于block level的元素，所以对table不起作用。 

查看更多 下一篇