html - 如何使用 CSS 定位表格

Question

我有一个有两列的表格，右侧包含 3 个按钮，这些按钮更改表格另一列中的内容。我希望这张桌子位于页面的中心顶部，但我不知道该怎么做。

这是我想要的屏幕截图（图像也显示了标题，但现在并不重要）

如果可能的话，我希望按钮在另一列的内容发生变化时不移动，但这不是优先事项。

如果这有帮助，我也可以用另一种结构更改表格。

这是html代码：

<div class='main'>
<table class="table"> 
    <tr> 
        <td>
            <input type="button" class="button" value="edit_menu"/><br><br>
            <input type="button" class="button" value="edit_desc"/><br><br>
            <input type="button" class="button" value="set_push"/>
        </td>
        <td>
            <div id="content">
                <div id="edit_menu" display="none" class="form">

                            here is a simple form

                </div>

                <div id="edit_desc" display="none" class="form">
                    here is a second form
                </div>

                <div id="set_push" display="none" class="form">
                    here is a third form
                </div>
            </div>
        </td>
    </tr>   
</table>  
</div>

按下按钮时，表单的可见性会通过 Javascript 更改。

Answer 1

尝试使用下面的代码。CSS：

body {margin:0; padding:0;}
.wrapper {width: 500px /* width of your table*/; margin:0 auto;}

html：

<div class="wrapper">
 <!-- put your table here -->
</div>