网站地图    收藏   

主页 > 前端 > css教程 >

表格列表CSS样式 - html/css语言栏目:html.css - 自学

来源:自学PHP网    时间:2015-04-14 14:51 作者: 阅读:

[导读] table class=list_table width=100% border=0 cellspacing=0 cellpadding=0 tr thLatin name th...

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

 

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论