css表格样式

阅读更多

1. css表格样式

    

        
学生信息
        
序号
学号
姓名
性别
出生日期
        

            
1
001
魏安复
男
2012-12-12
            
2
002
杜子腾
女
2011-11-11
            
3
003
史珍湘
女
2010-10-10
            
4
004
梅读
女
2009-10-10
            
5
005
赖月金
男
2008-01-01
        
        
总计
5条数据
    

1) 设置表格的边框

border：设置表格边框；
border-collapse：设置边框分离，合并默认是separate(分离)collapse合并；
border-spacing：设置单元格的间距；
padding：设置单元格内容和边框之间的距离；

2) 设置表格的宽度

table-layout
默认auto自动方式，根据单元格的内容自动调整宽度；
fixed固定方式表格宽度固定；

3) 设置表格隔行换色

tbody tr.even{background-color: #AAA;}

4) 设置表格列样式，使用连接选择器

th+td{text-align: center;}
th+td+td+td{text-align: center;background-color: red;}

5) 设置鼠标经过时行变色效果

tbody tr:HOVER {background-color: aqua;}