表与备用背景行和标题

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>并将所有正文行放入其中。另外，将标题包装在<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}

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

小提琴：http://jsfiddle.net/praveenscience/TQgjC/