Html 将表格置于 TD 中
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/14075918/
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
Center a Table inside a TD
提问by Carlos Gavidia-Calderon
I have a very simple problem: I need to center a table inside a TD element. If I were using HTML 4 I'd do it like this:
我有一个非常简单的问题:我需要将表格放在 TD 元素中。如果我使用 HTML 4,我会这样做:
?<table style="border:solid;width: 100%">
<tr>
<td align="center">
<table style="border:solid; width:50%">
<tr>
<td >I must be in the center</td>
</tr>
</table>
</td>
</tr>
</table>?
But I'm trying not to use deprecated attributes and do it the CSS way. I already tried this:
但我尽量不使用已弃用的属性,而是采用 CSS 方式。我已经试过了:
<td style="text-align:center">
And this:
和这个:
<td style="margin: 0 auto">
And the tables keeps in the left-side of the cell. Any suggestions?
表格保留在单元格的左侧。有什么建议?
回答by Elliot B.
You had the right idea with margin:auto 0;
just take off the 0.
你有正确的想法,margin:auto 0;
只需去掉 0。
Working example: http://jsfiddle.net/cxnR8/
工作示例:http: //jsfiddle.net/cxnR8/
<table style="border:solid;width: 100%">
<tr>
<td>
<table style="margin:auto;border:solid; width:50%">
<tr>
<td >I must be in the center</td>
</tr>
</table>
</td>
</tr>
</table>?
But, more importantly, do you really need to use tables and in-line styling?
但是,更重要的是,您真的需要使用表格和内联样式吗?
回答by Paul Fleming
Your seccond suggestion is correct. See this working example.
你的第二个建议是正确的。请参阅此工作示例。
HTML:
HTML:
<table class="outer">
<tr>
<td>
<table class="inner">
<tr>
<td>in the middle</td>
</tr>
</table>
</td>
</tr>
</table>?
CSS:
CSS:
.outer
{
width: 100%;
border: solid 1px red;
}
.inner
{
width: 25%;
margin: auto;
border: solid 1px blue;
}
?
回答by srikalki mangu
Center the table using the deprecated align=""
attribute.
使用已弃用的align=""
属性将表格居中。
<table>
<tr>
<td>
<table align="center">
<tr>
<td>in the middle</td>
</tr>
</table>
</td>
</tr>
</table>?