如何水平对齐表格中的列答案

【问题标题】：How to horizontally align columns in a table如何水平对齐表格中的列
【发布时间】：2012-03-12 05:51:48
【问题描述】：

我读到表格的每一列都可以使用<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中的规范。

我正在使用 Chrome 17。

【问题讨论】：

使用 div's 会让事情变得更简单.. 如果你不介意用 div's 来做，请查看这个链接 -- stackoverflow.com/questions/9349109/…
我同意。在超过 15 年的时间里，我很少看到使用 COLGROUP。我什至不认为 Safari 支持它。使用 DIV 和类名，至少你可以找到帮助！
见stackoverflow.com/questions/1238115/…和stackoverflow.com/questions/1119106/…。
stackoverflow.com/questions/6318185/…

标签： html css

【解决方案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>

【讨论】：

那么，如果一张表有一千行，那么命令 class="..." 应该重复 3000 次？在我看来，这看起来很愚蠢......
@Rodrigo 在我看来，在没有分页的情况下渲染 3,000 行的表格是非常懒惰和愚蠢的。也可以使用 :nth-child() CSS 选择器来避免重复类属性。但是IE8及以下不支持，所以在使用这些东西之前应该考虑到他们的目标受众。
在一个好的分页项目中，我们应该给用户选择页面大小的选项，如果某个表格有3000行，他/她可能希望一次看到它们，所以它一定是可能的。此外，在 21 世纪，大多数计算机都可以做到这一点。但最好使用更高效的东西（例如 nth-child ——虽然我不确定现在大多数浏览器是否支持它）。

【解决方案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;
}

（你可以用逗号统一所有常见的样式，只用分隔文本对齐方式）

【讨论】：

【解决方案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>

【讨论】：

如果我需要使用<div> 为每个单元格指定样式，那么我可以在<table> 的<td> 中执行相同的操作。
这正是我放弃桌子的原因，我一直期待它为我做事，有时它会，有时它不会。现在我对它不抱任何期望，因为我只是看不到再使用它的理由。每个 div 都需要一个类，如果您手动编写 html，这会很痛苦，但如果您像我一样，那么您的大多数表格都是动态制作的。据我所知，标准社区尚未解决您正在寻找的功能。宽度“有效”，因为为了保持表格，以下列必须符合标题。
即使它是动态的，类不只是......好吧，css的全部意义？我会把整个事情写在 div 中。
有 :first-child 选择器，但这对其他列没有帮助。唯一的其他选择是让 javascript 为您设置类。 Javascript 能够解决这个问题。但是，不幸的是，没有选择器会自动为您执行此操作，而 JS 唯一可以节省的就是您担心所有额外类的带宽。并且，类的重点不是让 div 纯粹基于它们在一组元素中的位置来自动获得对它们的理解，尽管这样会很好。
@Caimen，您断言 :first-child 选择器是唯一可用的选择器的断言不再正确。还有其他选择器，例如 :last-child、:nth-child(2) :nth-last-child(2)、:nth-of-type(2) 和 :nth-last-of-type(2) 选择器。