css - 使用 css 自动将不同的列样式应用于表列

Question

在一个页面中，我有许多 HTML 表格，其中包含许多列。我需要对它们应用不同的样式。所有列将具有不同的宽度，但在表格中它们将相同，我的意思是所有表格的第一列将相同，第二列和所有列相同。

CSS 应用于表格而不是列，有没有办法我只添加 css 类，我可能不必在 html 代码中应用它们，它们会自动应用。可能使用伪列或任何其他方式？

Answer 1

如果您能够使用支持 CSS 的浏览器，nth-child()则可以使用：

tr td:nth-child(even) {
    background-color: #ffa;
}

JS 小提琴演示。

在上面的演示中，我用来:nth-child(even)避免对第一个td元素（包含行标题）进行样式设置，当然，您可以在th元素中包含行标题（这可能在语义上更正确），或者，要设置odd列（或odd td元素）而不是的样式:first-child，可以使用:not()选择器：

tr td:nth-child(odd):not(:first-child) {
    background-color: #ffa;
}

JS 小提琴演示。

如果您受限于必须支持不支持:nth-child()伪类的旧浏览器，您可以使用相邻兄弟选择器（尽管这不太易于维护）：

td + td, /* styles the second td */
td + td + td + td { /* styles the fourth td */
    background-color: #ffa;
}

td + td + td { /* styles the third td */
    background-color: #fff;
}

JS 小提琴演示。

尽管使用类来设置样式会更容易（即使只为(odd或)even提供样式：

.even { /* styles the cells with the class of 'even' */
    background-color: #ffa;
}

.even + td { /* styles the cell that follows the cell with the 'even' class */
    background-color: #f90;
}

您还可以使用colgroupandcol元素为您的列定义类：

<table>
    <colgroup>
        <col class="first" />
        <col class="second" />
        <col class="third" />
        <col class="fourth" />
    </colgroup>
    <thead>
        <tr>
            <th></th>
            <th>Column one</th>
            <th>Column two</th>
            <th>Column three</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row one</td>
            <td>row one, cell one</td>
            <td>row one, cell two</td>
            <td>row one, cell three</td>
        </tr>
        <tr>
            <td>Row two</td>
            <td>row two, cell one</td>
            <td>row two, cell two</td>
            <td>row two, cell three</td>
        </tr>
    </tbody>
</table>

以下面的 CSS 为例（请注意，没有理由不设置其他col类的样式，我只是在此演示中选择不设置）：

.second, .fourth {
    background-color: #ffa;
}​

JS 小提琴演示。

参考：

• 相邻兄弟 ( +) 组合子。
• col.
• colgroup.
• :first-child.
• :not().
• :not()兼容性，在 Quirksmode。
• :nth-child().
• :nth-child()兼容性，在 Quirksmode。

Answer 2

您可以使用 CSS3 “n-th” 选择器，但它不适用于旧浏览器。因此，您最好的解决方案是在页面加载后应用 javascript（例如 jQuery）中的更改。

$(function() {
    $("table tr td:nth-child(n)").css('width', '100px');
});

或者你可以添加一个类

$("table tr td:nth-child(n)").addClass("myWidth1");

在你的 CSS 中

.myWidth1{ width: 100px }

确保表格选择器捕获所有表格。