在一个页面中,我有许多 HTML 表格,其中包含许多列。我需要对它们应用不同的样式。所有列将具有不同的宽度,但在表格中它们将相同,我的意思是所有表格的第一列将相同,第二列和所有列相同。
CSS 应用于表格而不是列,有没有办法我只添加 css 类,我可能不必在 html 代码中应用它们,它们会自动应用。可能使用伪列或任何其他方式?
在一个页面中,我有许多 HTML 表格,其中包含许多列。我需要对它们应用不同的样式。所有列将具有不同的宽度,但在表格中它们将相同,我的意思是所有表格的第一列将相同,第二列和所有列相同。
CSS 应用于表格而不是列,有没有办法我只添加 css 类,我可能不必在 html 代码中应用它们,它们会自动应用。可能使用伪列或任何其他方式?
如果您能够使用支持 CSS 的浏览器,nth-child()
则可以使用:
tr td:nth-child(even) {
background-color: #ffa;
}
在上面的演示中,我用来:nth-child(even)
避免对第一个td
元素(包含行标题)进行样式设置,当然,您可以在th
元素中包含行标题(这可能在语义上更正确),或者,要设置odd
列(或odd
td
元素)而不是的样式:first-child
,可以使用:not()
选择器:
tr td:nth-child(odd):not(:first-child) {
background-color: #ffa;
}
如果您受限于必须支持不支持: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;
}
尽管使用类来设置样式会更容易(即使只为(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
andcol
元素为您的列定义类:
<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;
}
参考:
您可以使用 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 }
确保表格选择器捕获所有表格。