CSS nested table centering problem_html/css_WEB-ITnose-HTML Tutorial-php.cn

According to common sense, just set text-align:center in the tr or td of the parent table to center it. But it is centered in the VS designer, but not in the browser. It's understandable that it's not centered in ff, but it's puzzling even in 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>

Copy after login

If someone says it is inherited from the parent element, then there is nothing written in my parent element
There is just one more sentence in the outer table

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

Copy after login

Not to mention body . Only the background and foreground colors are set

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

Copy after login

But the table inside cannot be centered. Please help me analyze it~Thank you

Reply to the discussion (solution)

Solve online! Even a little suggestion will do~

Don’t add center in tr

Add it to td style="text-align:center"

Add it to td Inside style="text-align:center" has the same effect. I tried it earlier

The outermost layer is a div

This way it will be centered

<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>

Copy after login

Add styles to the subtable text-align:center will do

According to common sense...
You can’t follow common sense

Try it

          总建筑面积
          单价（元/平）
          小计

合计
大写：

单位工程数量

和

不一样，不信你可以试试

Just add display:inline-table; to the table inside.
The reason why it could not be centered before was probably because text-align cannot act on block level elements, so it does not work on tables.

Just add display:inline-table; to the table inside.
The reason why it couldn’t be centered before was probably because text-align cannot work on blocks... OK, thank you

Related labels：

CSS 嵌套table 居中问题

source：php.cn

Previous article：Ask the experts about div css. _html/css_WEB-ITnose Next article：In IE7 and below, the text is displayed horizontally, how to solve it_html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn