CSS编写单双行变色Table表格

首先编写CSS，dataintable的名字可以随便改，然后颜色也可以看着改一改。

table.dataintable {margin-top:15px;border-collapse:collapse;border:1px solid #aaa;width:100%;
}
table.dataintable th {vertical-align:baseline;padding:5px 15px 5px 6px;background-color:#3F3F3F;border:1px solid #3F3F3F;text-align:left;color:#fff;
}
table.dataintable td {vertical-align:text-top;padding:6px 15px 6px 6px;border:1px solid #aaa;
}
table.dataintable tr:nth-child(odd) {background-color:#F5F5F5;
}
table.dataintable tr:nth-child(even) {background-color:#fff;
}

其次编写HTML

<table class="dataintable"><tr><th>值</th><th>描述</th></tr><tr><td><i>outline-color</i></td><td>规定边框的颜色。</td></tr><tr><td><i>outline-style</i></td><td>规定边框的样式。</td></tr><tr><td><i>outline-width</i></td><td>规定边框的宽度。</td></tr><tr><td>inherit</td><td>规定应该从父元素继承 outline 属性的设置。</td></tr>
</table>

效果如下图所示。还好