如何正确地将 table 置于其 div 容器中？

Question

我不太喜欢 HTML 和 CSS，我在将 table 放在其容器的中心时遇到了一些问题。所以我有以下情况：

<!-- SEDE LEGALE: -->
<div id="sedeLegaleTab">
    <table class="standard-table-cls table-header-cls">
        <thead class="opening active">
            <tr>
                <th>
                    <img class="imgAccordion" src="img/arrow_down.gif"/>
                    Sede Legale
                </th>
             </tr>
        </thead>

        <tbody class="expanded" >
            <tr>
                <td>
                    <div id="sedeLegaleContent" class="accordion-pane-content">
                        <table class="standard-table-cls" style="width: 90%;">
                            <tbody>
                                <tr>
                                    <td>Ragione Sociale</td>
                                    <td colspan=5>
                                        <input type="TEXT" name="ragsoc" size=60 maxlength=100 <%=master?"":"readonly"%>
                                               class="testosmallUpper" value="<%= ragioneSociale %>" onblur="MakeItUpper(event,this)">
                                    </td>
                                </tr>

                                ..............................................
                                ..............................................
                                ..............................................
                                OTHER TR
                                ..............................................
                                ..............................................
                                ..............................................
                            </tbody>
                        </table>
                     </div>
                </td> 
            </tr>
        </tbody>
    </table>
</div>

我知道这是一个非常糟糕的旧 table 布局，但它是一个非常旧的遗留应用程序，我必须对其进行处理。

所以这是这个 table 的内容呈现的屏幕截图（在前面的代码中）：

<table class="standard-table-cls" style="width: 90%;">

现在，如您所见，这个 table 变成了 div 具有 id="sedeLegaleContent" 并且它已设置 样式="width: 90%;"

所以我需要将它放在容器的中心（div 有 id="sedeLegaleContent"）

我可以尝试做什么？

我可以在 div 中添加 align="center" 属性，这样：

<div id="sedeLegaleContent" class="accordion-pane-content" align="center">

但是我可以使用 CSS 以更好的方式做到这一点吗？或者这是一个好的解决方案？

Answer 1

尝试这样使用：Demo

CSS:

table{
    border:1px solid #ddd;
    margin:0 auto;
}

如何正确地将 table 置于其 div 容器中？

How correctly center a table into its div container?

html

css

xhtml

html-table