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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 04:37:25  来源:igfitidea点击:

Center a Table inside a TD

htmlcsshtml-tablealignment

提问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>?