Question

我读到表格的每一列都可以使用<colgroup>和<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>

结果是默认情况下每个列都保持对齐，忽略colgroup中的规范。

table

我正在使用Chrome 17。

Answer 1

虽然对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>

Answer 2

如果不需要表格，以下是如何做到无表格，以防万一：

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：

.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;
}

（你可以用逗号统一所有常见的样式，然后将文本对齐分开）

Answer 3

不要使用表格，使用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>

如何水平对齐表中的列

3 个答案: