我在使用 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;
}
关于javascript - 使用 CSS 设计表格样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17830281/