如何通过 CSS 在父表中居中对齐 HTML 子表
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6032709/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center-align an HTML child table within a parent table via CSS
提问by Jed
I have the following HTML table format:
我有以下 HTML 表格格式:
<table style="width: 100%;">
<tr>
<td>
//How to center this table within the parent-table cell?
<table style="width: 760px;">
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
Since HTML5 doesn't support the 'align=center' for tables, I am trying to figure out how to simulate the 'align=center' in CSS for the sub-table in my example above.
由于 HTML5 不支持表格的 'align=center',我试图弄清楚如何在 CSS 中模拟上面示例中子表格的 'align=center'。
I've tried messin' around with the CSS margin attribute to no avail.
我已经尝试过使用 CSS 边距属性无济于事。
How do I center the sub-table in the example above?
如何将上面示例中的子表居中?
回答by MikeM
table {border:solid 1px #0f0}
table table {border:solid 1px #f00;margin: 0 auto}
<table style="width: 100%;">
<tr>
<td>
//How to center this table within the parent-table cell?
<table style="width: 760px;">
<tr>
<td>
Center This Table Dawg
</td>
</tr>
</table>
</td>
</tr>
</table>
margin:0 auto;
worked in this example, tested/worked in IE 7-9, FF 4, Chrome 11
margin:0 auto;
在这个例子中工作,在 IE 7-9、FF 4、Chrome 11 中测试/工作
回答by John Ennis
<table style="width: 100%;">
<tr>
<td>
<table style="width: 760px; margin: auto;">
<tr>
<td>
ss
</td>
</tr>
</table>
</td>
</tr>
</table>