Examples of CSS styles for table list even sequence and odd series

Table list CSS styles include: Even series, odd series, mouse over time style, title column, etc., in the next example will be perfect for everyone, interested friends do not miss

 

HTML Sample source code:

Copy Code code as follows:


&lt;table class= "list_table" width= "100%" border= "0" cellspacing= "0" cellpadding= "0" &gt; <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 source code:
Copy the code as follows:
/* 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;
}
/*Title Column*/
.list_table th{
background-color: #FC9;
}
/*Mouse over style*/
.list_table tr:hover {
background-color:#CCC;
}
/*Odd column*/
.odd {
background-color: #FFC;
}
/*Even column*/
.even {
background-color: #FC9;
}