Question

我有这个css：

.tableheader {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
}
.text1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    background-color: #fff;
}
......
<table class = bordergray cellspacing=1 cellpadding=5>
<tr class = tableheader  valign="bottom">
<caption>Shining Star Award</caption>
<td>Month</td>
<td>employee first name</td>
<td>employee last name</td>
<td>stars<br/></td>
</tr>

<cfoutput query="shiningStar">
<tr class = text1>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
</tr>
</cfoutput>
</table>

我希望桌子出现在页面的中央，还是不在左下角？我该怎么做？

Answer 1

使用margin: 0 auto

示例：
.bordergray{ margin: 0 auto; }

http://jsfiddle.net/vDzx4/

Answer 2

这是你想要的吗？

DEMO

您的HTML标记无效 - ＆gt; classes应引用class="someclass"

要将页面中的元素居中，您应该为其fixed width并使用margin:0 auto。

<强> HTML

<table class="bordergray" cellspacing="1" cellpadding="5">
<tr class="tableheader"  valign="bottom">
<caption>Shining Star Award</caption>
<td>Month</td>
<td>employee first name</td>
<td>employee last name</td>
<td>stars<br/></td>
</tr>

<cfoutput query="shiningStar">
<tr class="text1">
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
</tr>
</cfoutput>
</table>

<强> CSS

.bordergray{
    width:300px; /*fixed width for aligning the element center*/
    border:1px solid red;
    margin:0 auto; /*centers the element*/


}
.tableheader {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    }
.text1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    background-color: #fff;
}

Answer 3

您的align="center"代码

中的

table

Demo 1

或

在您的margin: 0 auto;类

的css中提及table

Demo 2

不要忘记在类名

周围添加""双引号

如何将表格置于页面中心？

3 个答案: