如何为 <table> 列和行赋予不同的样式？答案

【问题标题】：How to give different style to <table> columns and rows?如何为 <table> 列和行赋予不同的样式？
【发布时间】：2017-05-27 20:34:00
【问题描述】：

如何仅对表的最后一行以及第一列和最后一列赋予不同的样式。 是否可以不使用 css 类？

在此处查看当前示例http://jsfiddle.net/jitendravyas/KxmY5/1/

这就是我想要的：

【问题讨论】：

你的目标浏览器是什么？
所以你也瞄准IE6？那你可能倒霉了……

标签： css html-table

【解决方案1】：

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

这里引用Sitepoint's nth child article

【讨论】：

是否可以使用 colgroup、rowgroup

【解决方案2】：

这真是太骇人听闻了。在 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 行恢复它们。

【讨论】：

【解决方案3】：

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

【讨论】：