今天小编跟大家讲解下有关表格列表偶数列、奇数列的CSS样式示例 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关表格列表偶数列、奇数列的CSS样式示例 的相关资料,希望小伙伴们看了有所帮助。
HTML示例源代码:复制代码代码如下:<table class="list_table"width="100%"border="0"cellspacing="0"cellpadding="0"> <tr> <th>Latin name</th> <th>fastq file</th> <th>fasta file</th> <th>snp</th> <th>Article</th> </tr> <tr class="odd"> <td>Latimeria chalumnae</td> <td><a href="">fastq</a></td> <td><a href="">fasta</a></td> <td><a href="">snp</a></td> <td><a href="">article</a></td> </tr> <tr class="even"> <td>Branchiostoma floridae</td> <td><a href="">fastq</a></td> <td><a href="">fasta</a></td> <td><a href="">snp</a></td> <td><a href="">article</a></td> </tr> <tr class="odd"> <td>Gadus morhua</td> <td><a href="">fastq</a></td> <td>NA</td> <td><a href="">snp</a></td> <td><a href="">article</a></td> </tr> <tr class="even"> <td>Macropus eugenii</td> <td><a href="">fastq</a></td> <td><a href="">fasta</a></td> <td>NA</td> <td><a href="">article</a></td> </tr> </table> CSS源代码: 复制代码代码如下: .list_table { margin-top: 0px; padding: 0; font-size: 12px; word-wrap:break-word; border:2px solid #8a5603; border-collapse:collapse; } .list_table td, .list_table th{ word-wrap:break-word; border:2px solid #8a5603; border-collapse:collapse; } .list_table th{ background-color: #FC9; } .list_table tr:hover { background-color:#CCC; } .odd { background-color: #FFC; } .even { background-color: #FC9; }来源:爱蒂网