使用 CSS 样式表

Posted 2023-03-06

【中文标题】使用 CSS 样式表

【英文标题】：Styling tables using CSS

【发布时间】：2013-07-23 17:00:41

【问题描述】：

我在使用 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;

问题在于它既不改变颜色，也不改变奇数行或奇数。

我做错了什么？

谢谢。

【参考方案1】：

我会为此提供一个 CSS 解决方案：

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


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

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

Demo

对于您的表格标题，您可以简单地使用不同的选择器来覆盖背景样式，例如

table.altrowstable tr th 
    background: #fff;

Demo 2

【讨论】：

@PaulD.Waite 我们有workarounds :)

PIE 不是 IE 8 不支持 :nth-child 的解决方法。正如您链接的页面所说，“PIE 不会尝试实现任何 CSS3 选择器。”

@PaulD.Waite 你读过this吗？

@PaulD.Waite 我希望你能顺利通过...... :)

阅读超过前十个字？在互联网上？ 你在开玩笑吗！？

【参考方案2】：

您的 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

【讨论】：

你检查过你的小提琴吗？看起来像棋盘

表示一行中的一个单元格。 OP 希望将 bg 颜色效果应用于 =row 而不是单元格。

@AnaMaria：我更新了小提琴，但我的回答仍然有效。为什么要投反对票？

【参考方案3】：

我喜欢提供不修补或修改原始来源的解决方案。 您的 HTML 很好，JScript 很好（非常好）。很高兴看到您使用 .classname 以便跨浏览器兼容。所以我所做的只是更改 CSS

的类

你的代码

table.oddrowcolor 
    background-color:#d4e3e5;

table.evenrowcolor 
    background-color:#c3dde0;

我的改变

tr.oddrowcolor 
    background-color:#d4e3e5;

tr.evenrowcolor 
    background-color:#c3dde0;

WORKING FIDDLE

从您的代码到我的代码的总变化。 8 个字符。是不是很简单？

【参考方案4】：

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

table .oddrowcolor
   background-color:#d4e3e5;

table .evenrowcolor
   background-color:#c3dde0;

【参考方案5】：

试试这个...see the Demo

tr:nth-child(even) background: #CCC
tr:nth-child(odd) background: #FFF