【积累】表格列表CSS样式

来源：互联网发布：20毫米机炮弹药数据编辑：程序博客网时间：2024/05/09 20:41

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源代码：

/* 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;}