如何为列和行提供不同的样式？<table> </table>

Question

如何为表的最后一行以及表的第一列和最后一列提供不同的样式。 是否可以不使用css类？

请参阅此处的当前示例http://jsfiddle.net/jitendravyas/KxmY5/1/

这就是我想要的：

Answer 1

如果您的目标是具有任何历史性质的A级浏览器（IE 6等），则无法使用类/ ID来选择它们。如果您定位的浏览器支持CSS中的:nth子选择器，您可以编写一个规则来选择它们，但要知道所有（可能）访问者的浏览器都不支持它。

以下是对Sitepoint's nth child article

的引用

Answer 2

这令人难以置信的hacky。在IE6中根本不起作用（由于使用'+'邻接子选择器）。主要在FF 3.6中工作，但是如果不使用类，ID或：nth-​​child选择器，它应该让你知道这有多丑。

<style type="text/css">

table tr + tr + tr + tr + tr + tr + tr + tr td {
        background-color: yellow; /* row 8 */
}

table tr + tr + tr + tr + tr + tr + tr + tr + tr td {
        background-color: white; /* rows 9+ */
}

table tr td {
        background-color: red; /* 1st column */
}

table tr td + td {
        background-color: white; /* reset 2nd column to white */
}

table tr td + td + td {
        background-color: green; /* 3rd column */
}

table tr td + td + td + td {
        background-color: white; /* reset cols 4-10 */
}

</style>

现在，红色/绿色列被黄色行终止。但是这些丑陋的东西中的一些可以在第9行和第10行恢复它们。

Answer 3

通过使用JQuery JavaScript框架，在您的情况下可能更容易。