Chrome与Firefox中表格CSS样式显示异常问题求助

你的表格样式不生效的核心原因是CSS代码存在语法错误，导致浏览器无法正确解析后续的样式规则。具体问题和修复方案如下：

1. 未闭合的CSS规则（最关键问题） #

在你的CSS代码中，.rowA的规则没有闭合大括号}，导致.rowB、.cellBrdrRght等后续选择器都被错误地嵌套在.rowA的规则内部。这意味着只有同时拥有.rowA类的元素才会应用这些样式，而你的.rowB行根本匹配不到这个规则。

错误代码片段： #

.rowA{ background-color: #d0d0d0!important; color: #4b4b4b; 
/* 这里缺少闭合的 } */
.rowB{ background-color: #666666!important; color: #fff; }

修复后： #

.rowA{ 
    background-color: #d0d0d0!important; 
    color: #4b4b4b; 
} /* 补上这个闭合大括号 */
.rowB{ 
    background-color: #666666!important; 
    color: #fff; 
}

2. 其他CSS语法错误修正 #

除了上述核心问题，还有几个小错误需要修复：

• .tableFooter中的colspan: 3;是HTML属性，不能写在CSS里，直接删除这一行。
• a:sideBar是错误的选择器写法，应该是a.sideBar（类选择器），如果是想选中带有sideBar类的<a>标签的话。
• .cellnoBrd建议添加!important来覆盖浏览器默认的表格边框样式，确保边框完全移除：

  .cellnoBrd { 
      border-style: none!important; 
  }
  

3. 完整修复后的CSS代码 #

@charset "UTF-8"; 
/* CSS Document */ 
/* info charts */ 
td{ 
    vertical-align: middle; 
} 
.chartHeader{ 
    background-color: #115967!important; 
    color: #fff; 
    text-align: center; 
    font-weight: bold; 
} 
.rowA{ 
    background-color: #d0d0d0!important; 
    color: #4b4b4b; 
} 
.rowB{ 
    background-color: #666666!important; 
    color: #fff; 
} 
.cellBrdrRght { 
    border-style: solid!important; 
    border-width: 0px 1px 0px 0px!important; 
    border-color: white!important; 
} 
.cellnoBrd { 
    border-style: none!important; 
} 
.tableFooter{ 
    font-size: 10px; 
    border-style: none; 
    background-color: #115967!important; 
    color: #fff; 
    text-align: left; 
}
a.sideBar { 
    background-color: #115967!important; 
    padding: 25px 50px 75px 100px; 
    color: #fff; 
}

4. 验证修复效果 #

修复后，浏览器能正确解析所有样式规则：

• .rowB的背景色会正常显示在对应的表格行上
• .cellBrdrRght的右侧白色边框会生效
• 其他表格样式也能正常渲染

内容的提问来源于stack exchange，提问作者user9876931