logo标签列表

使用CSS进行表格列样式设计

javascriptjqueryhtmlcss
3
我有以下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/

还有一种方法：设置HTML表格的列宽度

检查一下我的 JavaScript 解决方案。 - Jose Rui Santos
@JoseRuiSantos 我尝试使用以下jQuery。但它不起作用。我在这里犯了什么错误？http://jsfiddle.net/Lijo/kw4yU/8/ - LCJ
@Liijo请看我的答案下的评论，那里解释了你的JS无法运行的原因。 - Jose Rui Santos
9个回答
9
使用 + 选择器。
​#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;
}

这里有演示

编辑

上述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;
}

编辑2

一个使用jQuery的JavaScript解决方案。

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

​

谢谢。但是它在IE6中不起作用。有什么办法可以让它在IE6中工作吗？jsfiddle.net/Lijo/kw4yU/4 - LCJ
@Lijo Js版本应该可以在IE6中运行。抱歉我手头没有IE6。 - Jose Rui Santos
1
+、> 和 ~ 都是 IE7+ 才支持的，所以不行，你需要使用类、ID 或 JS 来兼容 IE6。或者如果可以的话，放弃对 IE6 的像素完美支持，只要能读懂就好了 :) - FelipeAls
1
@Lijo 我同意Felipe的观点。如果你仍然需要支持IE6，只需使用类或JS。但是如果可以避免使用IE6，请跳过它并切换到真正的浏览器。这是2012年 :) - Jose Rui Santos
我尝试使用以下jQuery。但它不起作用。我在这里犯了什么错误？http://jsfiddle.net/Lijo/kw4yU/8/ - LCJ
1
@Lijo 当文档完全加载时，您需要运行JavaScript，这意味着您需要在 $(document).ready(function () { /*your code here*/ }); 中运行JavaScript代码。请参见 http://jsfiddle.net/kw4yU/10/ 更多信息请访问 http://api.jquery.com/ready/ - Jose Rui Santos
6

你可以这样做：

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

然而，此方法使用的是CSS3，因此如果您想支持旧版浏览器，则需要使用JavaScript。
2
请查看quirksmode上的nth-child兼容性表，以确定它是否受到您想要支持的浏览器的支持。 - Jeroen
3
你可以在 table 标签后添加 col。
<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>
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>
1
在 td 中添加一个类。
HTML: <td class="first new-class">data</td> CSS：
td.first {
    background-color: #00FF00;
}
1
一个 class 会更合适，否则你只能给第一行上色 ;) - Jeroen
1
就像Jeroen所说，使用类更好。感谢您指出这一点。因此，CSS将变为：td.first，HTML将变为：<td class="first"></td>。 - Tikkes
1
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中为每个列添加一个类，然后以不同的样式设置列类。

谢谢。但它在IE6中不起作用。有没有办法在不使用Javascript的情况下使其在IE6中工作？http://jsfiddle.net/Lijo/kw4yU/4/ - LCJ
1
你可以使用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或类，并在样式表中引用它。
0

表格不是按列构建的，而是按行构建的。因此，为了进行基于列的样式设置，必须对每个单元格元素应用一个共同的样式。

这个示例

样式

.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>
0

如果您不想更改HTML代码，可以尝试以下方法：

table tr td {
    background-color: orange;            
}

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

table tr td+td+td {
    background-color: green;            
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接