使用CSS的表列样式

Question

我有以下HTML表格。我需要为每列提供背景颜色（第一列=红色，第二列=黄色，第三列=蓝色）。我怎么能用CSS做到这一点？

注意：这需要在IE6开始工作。

http://jsfiddle.net/Lijo/kw4yU/

  <table id = "myTable">
    <thead>
        <tr>
            <th>
                 Name
            </th>
            <th>
                Address
            </th>
            <th>
                Age
            </th>
        </tr>
    </thead>
    <tr>
        <td>
            Lijo
        </td>
        <td>
            India
        </td>
        <td>
            27
        </td>
    </tr>
</table>

---

修改

我通过将js代码放在document.ready中来实现它。感谢@Jose Rui Santos http://jsfiddle.net/Lijo/kw4yU/11/

另一个解决方案是http://jsfiddle.net/Lijo/kw4yU/12/

又一种方法：Column width setting - HTML table

Answer 1

使用+选择器

​#myTable tr td {            /* makes all columns red */
    background-color: red;
}
#myTable tr td + td {       /* makes 2nd and 3rd columns yellow */
    background-color: yellow;
}
#myTable tr td + td + td {  /* makes 3rd column blue */
    background-color: blue;
}

demo here

修改

上述CSS仅更改数据单元格的背景颜色。如果您还要包含表格标题，请执行以下操作：

#myTable tr th,
#myTable tr td {
    background-color: red;
}

#myTable tr th + th,
#myTable tr td + td {
    background-color: yellow;
}

#myTable tr th + th + th,
#myTable tr td + td + td {
    background-color: blue;
}

<强> EDIT2

一个javascript solution is，使用jQuery

$("#myTable th, #myTable td").each(function (i) {
    $(this).css('background-color', ['red', 'yellow', 'blue'][i % 3]);
});

Answer 2

你可以这样做：

td:nth-child(1){
    background-color: #f00;
}
td:nth-child(2){
    background-color: #ff0;
}
td:nth-child(3){
    background-color: #00f;
}

但是，这是使用CSS3，所以如果你想支持旧的浏览器，你需要使用JavaScript。

Answer 3

使用COL标签。

<style>
table {
    background-color: black;
}
.first {
    background-color: orange;
}
.second {
    background-color: green;
}
.third {
    background-color: pink;
}
</style>

  <table id = "myTable">
  <col class="first" /><col class="second" /><col class="third" />
    <thead>
        <tr>
            <th>
                 Name
            </th>
            <th>
                Address
            </th>
    <th>
                Age
            </th>
        </tr>
    </thead>
    <tr>
        <td>
            Lijo
        </td>
        <td>
            India
        </td>
    <td>
            27
        </td>
    </tr>
</table>

Answer 4

您可以在col代码

之后添加table

<table id = "myTable">
<col style="background-color: red;" />
<col style="background-color: yellow;" />
<col style="background-color: blue;" />
<thead>
    <tr>
        <th>
             Name
        </th>
        <th>
            Address
        </th>
        <th>
            Age
        </th>
    </tr>
    </thead>
    <tr>
        <td>
            Lijo
        </td>
        <td>
            India
        </td>
        <td>
            27
        </td>
    </tr>
</table>

Answer 5

th,td{background:yellow}
th:first-child,td:first-child{background:red}
th:last-child,td:last-child{background:blue}​

喜欢这个http://jsfiddle.net/thebabydino/kw4yU/3/

对于较旧的IE版本，请考虑使用兄弟选择器：

th,td{background:red}
th+th,td+td{background:yellow}
th+th+th,td+td+td{background:blue}​

...或者在HTML中的每一列中添加一个类，然后以不同的方式设置列类的样式。

Answer 6

您可以使用colgroup标记

<table id="myTable">
  <colgroup span="2" style="background-color:#FF0000;"></colgroup>
  <colgroup style="background-color:#0000FF;"></colgroup>
  <thead>
        <tr>
            <th>
                 Name
            </th>
            <th>
                Address
            </th>
    <th>
                Age
            </th>
        </tr>
    </thead>
    <tr>
        <td>
            Lijo
        </td>
        <td>
            India
        </td>
    <td>
            27
        </td>
    </tr>

</table> 

如果你不想要内联CSS，那么你可以给colgroups一个id或类，并在你的样式表中引用它。

Answer 7

将类添加到td。

HTML： <td class="first">data</td>

CSS：

td.first {
    background-color: #00FF00;
}

Answer 8

表不按列构造，按行构造。因此，为了进行基于列的样式化，每个单元格元素必须具有应用于其的单独的共同样式。

The fiddle

风格

.col1 { background-color: #ffddbb; }
.col2 { background-color: #ddffbb; }
.col3 { background-color: #bbddff; }

HTML

<table id = "myTable">
    <thead>
        <tr>
            <th class="col1">
                 Name
            </th>
            <th class="col2">
                Address
            </th>
    <th class="col3">
                Age
            </th>
        </tr>
    </thead>
    <tr>
        <td class="col1">
            Lijo
        </td>
        <td class="col2">
            India
        </td>
    <td class="col3">
            27
        </td>
    </tr>
</table>

Answer 9

如果您不想更改HTML代码，可以尝试使用：

table tr td {
    background-color: orange;            
}

​table tr td+td {
    background-color: yellow;            
}

table tr td+td+td {
    background-color: green;            
}