使用CSS设置表格样式

Styling tables using CSS

本文关键字：样式 表格 设置 CSS 使用      更新时间：2023-09-26

我在使用CSS设置表样式时遇到问题。

所以我在HTML文件中有一个表：

<table class="altrowstable" id="alternatecolor">
<tr>
    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
    <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
    <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
<tr>
    <td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
</tr>
<tr>
    <td>Text 4A</td><td>Text 4B</td><td>Text 4C</td>
</tr>
<tr>
    <td>Text 5A</td><td>Text 5B</td><td>Text 5C</td>
</tr>
</table>

这是我的JavaScript文件：

function altRows(id){
if(document.getElementsByTagName){  
    var table = document.getElementById(id);  
    var rows = table.getElementsByTagName("tr"); 
    for(i = 0; i < rows.length; i++){          
        if(i % 2 == 0){
            rows[i].className = "evenrowcolor";
        }else{
            rows[i].className = "oddrowcolor";
        }      
    }
  }
 }
 window.onload=function(){
altRows('alternatecolor');
 }

这是我的CSS文件：

table.altrowstable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #a9c6c9;
    border-collapse: collapse;
}
table.altrowstable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
}
table.altrowstable td {
    border-width: 1px;
    padding: 8px;
        border-style: solid;
    border-color: #a9c6c9;
}
table.oddrowcolor{
    background-color:#d4e3e5;
}
table.evenrowcolor{
    background-color:#c3dde0;
}

问题是它既不改变奇数行也不改变偶数行的颜色。

我做错了什么？

谢谢。

我将为您提供一个CSS解决方案：

table.class_name tr:nth-child(odd) {
   /* Styles */
}
table.class_name tr:nth-child(even) {
   /* Styles */
}

这就是你所需要的，尽管IE 8和更早版本不支持它。

演示

对于您的表头，您可以简单地使用不同的选择器来超越等背景样式

table.altrowstable tr th {
    background: #fff;
}

演示2

我确实检查了您的代码，发现需要对css进行一些更正才能获得预期的解决方案。表和行类名之间应该有一个空格。

table .oddrowcolor{
   background-color:#d4e3e5;
}
table .evenrowcolor{
   background-color:#c3dde0;
}

我喜欢提供那些不会修补或过多修改原始源代码的解决方案。您的HTML很好，JScript也很好（非常好）。很高兴看到您使用.classname，因此它是跨brwoser兼容的。所以我所做的只是更改CSS的类

您的代码

table.oddrowcolor {
    background-color:#d4e3e5;
}
table.evenrowcolor {
    background-color:#c3dde0;
}

我的改变

tr.oddrowcolor {
    background-color:#d4e3e5;
}
tr.evenrowcolor {
    background-color:#c3dde0;
}

工作FIDDLE

从你的代码到我的代码的全部更改。8个字符。很简单，不是吗？

您的CSS中有一个问题。您正在为table设置类，而对于td.应该是这样

您还需要修改下面的js，因为样式可以应用于td，而不能应用于tr

var rows = table.getElementsByTagName("td");

这是你的CSS 中的问题

table.oddrowcolor{
    background-color:#d4e3e5;
}
table.evenrowcolor{
    background-color:#c3dde0;
}

你应该用这个代替

table td.oddrowcolor{
    background-color:#d4e3e5;
}
table td.evenrowcolor{
    background-color:#c3dde0;
}

jsFiddle

试试这个请参阅演示

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
相关文章：