Question

我想根据标题上的类来对齐表格中的列。例如，如果我有下表：

<table>
    <thead>
        <th>Name</th>
        <th class="price">Price</th>
    </thead>
    <tbody>
        ....
    </tbody>
<table>

我知道我可以使用：nth-of-type但有时列将是第2列，其他时间将是第5列，在某些地方我会在同一个表中有几列对齐右边。

有没有办法实现这一目标？我不需要支持旧版浏览器，甚至不支持Internet Explorer 9（如果可以使用chrome和/或firefox就足够了）

为了澄清，我想将文本排列在与头部列相关联的正文中的列中

Answer 1

不，您无法设置表格单元格的样式，因此样式取决于列标题class上的th属性。 CSS中没有任何东西以这种方式连接单元格。

对齐列的最强大方法是在其中的每个单元格上生成class属性。从技术上讲，使用HTML align属性会更加健壮。

Answer 2

编辑：如下所示，这只适用于一些属性。不包括文字对齐。

把它放在你的CSS中：

col.price { text-align:right; }

你的HTML：

<table>
  <col />
  <col class="price" />
  <tr>
    <td>First TD of first TR</td>
    <td>9,95</td>
  </tr>
  <tr>
    <td>First TD of second TR</td>
    <td>4,85</td>
  </tr>
</table>

参考： http://quirksmode.org/css/css2/columns.html

将列与CSS对齐

2 个答案: