手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >表格列表偶数列、奇数列的CSS样式示例
表格列表偶数列、奇数列的CSS样式示例
摘要:HTML示例源代码:LatinnamefastqfilefastafilesnpArticleLatimeriachalumnaefastq...

HTML示例源代码:

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

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

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

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

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

}

【表格列表偶数列、奇数列的CSS样式示例】相关文章:

13种常用按钮、文本框、表单等CSS样式

网页制作CSS样式九条技巧

CSS写的简单表格示例

宽度百分比单位的转换公式及示例

根据用户浏览器及分辨率调用不同的CSS样式文件

5种方法立刻写出更好的CSS代码

CSS控制图片、表格、背景颜色渐变示例

用css实现十字的布局示例代码

鼠标移入移出改变CSS样式的小例子

css控制表格细边框样式

精品推荐
分类导航