当前位置:编程学习 > html/css >>

表格列表CSS样式

<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>


 

/* Table CSS Document */ .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; }

 

补充:web前端 , HTML/CSS  ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,