如何水平对齐表中的列

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>

Run Code Online (Sandbox Code Playgroud)

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

我使用的是Chrome 17.

Answer 1

Ser*_*hiy 6

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，9 月前
查看次数：	35008 次
最近记录：	13 年，9 月前