Question

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

CSS应用于表但不应用于列，是否有一种方法我只是添加css类，我可能不会在html代码中应用它们并自动应用它们。可能正在使用伪列或任何其他方式？

Answer 1

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

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

JS Fiddle demo

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

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

JS Fiddle demo

如果您不得不支持不支持: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 Fiddle demo

使用类设置样式更容易（即使仅为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;
}

您还可以使用colgroup和col元素为列定义类：

<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 Fiddle demo

参考文献：

Adjacent-sibling (+) combinator。
col。
colgroup。
:first-child。
:not()。
:not() compatibility, at Quirksmode。
:nth-child()。
:nth-child() compatibility, at Quirksmode。

Answer 2

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

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

或者你可以添加一个类

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

和你的css

.myWidth1{ width: 100px }

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

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

2 个答案: