表与备用背景行和标题

Question

我使用css使我的行像这样交替: 小提琴

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/