Html 如何水平对齐表格中的列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9385706/
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 horizontally align columns in a table
提问by sawa
I read that each column of a table can be styled using <colgroup>and <col>. I tried the following, but the style speficication is not seeming to work. How can I fix it?
When I do this with widthproperty, it works. Is there anything wrong with text-alignproperty?
我读到表格的每一列都可以使用<colgroup>and来设置样式<col>。我尝试了以下操作，但样式规范似乎不起作用。我该如何解决？当我用width财产做这件事时，它起作用了。text-align财产有什么问题吗？
<html><body><table>
<colgroup>
<col style="text-align:right" />
<col style="text-align:center" />
<col style="text-align:left" />
</colgroup>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
</table></body></html>
The result is that each colum is left aligned by default, ignoring the specification made in colgroup.
结果是默认情况下每个列都是左对齐的，忽略colgroup.
I am using Chrome 17.
我正在使用 Chrome 17。
回答by Serhiy
While support for colgroup and col seems to be spotty, I don't think one should throw out the baby with the bathwater. I think tables have their place, to display tabular data. Using divs to display tabular data borders on table-phobia in my opinion.
虽然对 colgroup 和 col 的支持似乎参差不齐，但我认为不应该把婴儿和洗澡水一起倒掉。我认为表格有它们的位置，可以显示表格数据。在我看来，使用 div 在表格恐惧症上显示表格数据边框。
<html><body>
<style>
.left {text-align:left;}
.center {text-align:center;}
.right {text-align:right;}
</style>
<table>
<tr>
<td class="left">aaaaaaaaaaa</td>
<td class="center">bbbbbbbbbbb</td>
<td class="right">ccccccccccc</td>
</tr>
<tr>
<td class="left">aaa</td>
<td class="center">bbb</td>
<td class="right">ccc</td>
</tr>
</table>
</body></html>
回答by Yisela
If not in need of tables, here′s how I′d do it tableless, just in case:
如果不需要桌子，这里是我如何做到无桌子，以防万一：
HTML:
HTML：
<div id="container">
<div class="left">left aligned text</div>
<div class="center">center aligned text</div>
<div class="right">right aligned text</div>
</div>
CSS:
CSS：
.container {}
.left {
width:100px;
float:left;
text-align:left;
}
.center {
width:100px;
float:left;
text-align:center;
}
.right {
width:100px;
float:left;
text-align:right;
}
(and you could just unify all the common styles with commas and just separate the text-alignment)
（你可以用逗号统一所有常见的样式，然后将文本对齐分开）
回答by Caimen
Don't use tables, use divs. Obviously the following should be seperated out into classes and such, but it works.
不要使用表格，使用 div。显然，以下内容应该分为类等，但它有效。
<html><body>
<div style="display: table">
<div style="display: table-row">
<div style="display: table-cell;">aaaaaaaaaaa</div>
<div style="display: table-cell;">bbbbbbbbbbb</div>
<div style="display: table-cell;">ccccccccccc</div>
</div>
<div style="display: table-row">
<div style="display: table-cell; text-align:right;">aaa</div>
<div style="display: table-cell; text-align:center;">bbb</div>
<div style="display: table-cell; text-align:left;">ccc</div>
</div>
</div>
</body></html>
