使用 CSS 将两列表格居中答案

【问题标题】：Centering a two column table with CSS使用 CSS 将两列表格居中
【发布时间】：2013-02-06 00:56:49
【问题描述】：

我的网站上有以下页面：

我通过在它们周围添加两列定义宽度来使这两列居中：

    <table class="form">
    <tbody>
    <tr>
    <td style="width:20%;"></td>
    <th>User ID</th>
    <td><input type="text" name="userid" id="userid" class="medium" value="" /></td>
    <td style="width:20%;"></td>
    </tr>
    <tr>
    <td></td>
    <th>Password</th>
    <td><input type="password" name="password" id="password" class="medium" /></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <th><label for="remember">Remember my user ID</label></th>
    <td><input type="checkbox" name="remember" id="remember" value="true" /></td>
    <td></td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
    <td colspan="3"><a href="forgot/">Forgot your user ID or password?</a></td>
    <td><input type="submit" name="submit" id="submit" value="Login" /></td>
    </tr>
    </tfoot>
    </table>

有没有什么方法可以做到这一点，而侧面的两个空列的宽度为 20%？

【问题讨论】：

OT：请将role="presentation"添加到您的<table>标签中，因此辅助技术不会将其视为普通桌子，此处不需要<tfoot>，并且使用不当跨度>

标签： html css html-table centering

【解决方案1】：

<style>
table.form {
    width: 400px; /* or however wide you want it */
    margin: 0 auto;
}
</style>

然后，您可以根据需要将提交按钮放在其自己的元素中，从而使提交按钮跨越整个宽度，或者您可以将其保留在表格中以获得一致的宽度。

【讨论】：

这行得通，但也使我有按钮的 tfoot 400px 我需要填充应用程序的容器

【解决方案2】：

虽然你可以找到一个解决方案来解决有人已经解决过的表格问题，但我建议你不要为此使用它们，表格的样式总是有问题的。您可以使用不同的 html 元素（例如 div）来完成此操作。下次再考虑吧:)

【讨论】：

+1。这。只是为了澄清：表格用于表格数据。不是布局。 :)
是的，我正在使用其他人开发的 CSS 框架。这仅适用于一个屏幕，因此我希望避免为一次性使用添加新样式。肯定是懒惰。

【解决方案3】：

定义要居中的元素的宽度（像素、em-s、百分比......），并设置 margin-left: auto margin-right: auto 会有所帮助

【讨论】：