html - 具有备用背景行和标题的表格

Question

我使用 css 使我的行像这样交替: Fiddle

tr:nth-child(odd) td   { background-color:red; }
tr:nth-child(even) td   { background-color:blue; }
tr th { background-color: yellow}

table {
    border: 1px solid black;
    margin: 10px;
    width: 100px;
    }

有些表格有标题，有些表格没有。数据总是需要以红色开头，但是当表格有标题时，它的行被算作第一行，数据以蓝色开头。有没有办法让它总是以红色开头？

Answer 1

使用<tbody>和 <thead>

使用 <tbody>并将所有 body 行放入其中。另外，将标题包装在 <thead> 中.更新了下面的 CSS:

tbody tr:nth-child(odd) td   { background-color:red; }
tbody tr:nth-child(even) td   { background-color:blue; }
thead tr th { background-color: yellow}

这样您将只定位数据行而不是标题行。希望这对你有帮助...

fiddle :http://jsfiddle.net/praveenscience/TQgjC/