居中两列的表与CSS

我有一个网站上看到以下页面：居中两列的表与CSS

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

：

Screenshot

我已经加入他们周围的两列定义的宽度为中心的两列

有没有办法做到这一点，如果没有宽度为20％的边上的两个空列？

来源

2013-02-20 Tom

OT：请加'角色=“演示“'您的'

'标签，所以辅助技术不会像普通表格那样对待它，并且''在这里不需要，并且使用不正确 – 2013-02-20 21:04:01

回答

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

然后可以使提交按钮，将其置于自己的元素跨越整个宽度，如果你愿意的话，或者你可以把它在表中一致的宽度。

来源

2013-02-20 20:58:42 DiMono

这样做也可以使tfoot在那里有按钮400px我需要填写应用程序的容器 – Tom 2013-02-20 21:01:39

我编辑了我的答案以解决该问题;） – DiMono 2013-02-20 21:02:41

啊，对。谢谢。 – Tom 2013-02-20 21:04:16

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

来源

2013-02-20 21:00:41

+1。这个。只是为了澄清：表格是表格数据。不是布局。 :) – 2013-02-20 21:01:36

是的，我正在使用其他人开发的CSS框架。这只适用于一个屏幕，所以我一直在寻找避免为单次使用添加新的样式。懒得肯定。 – Tom 2013-02-20 21:10:57

定义元素的宽度要居中（用像素，EM-S，百分比..），并设置margin-left: automargin-right: auto将有助于

来源

2013-02-20 21:48:11 boksa

居中两列的表与CSS

回答

相关问题