1

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

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

4

2 回答 2

4

如果您能够使用支持 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 小提琴演示

参考:

于 2012-11-11T22:49:16.947 回答
0

您可以使用 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 }

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

于 2012-11-11T22:23:10.217 回答