java表格样式_css表格样式

1. css表格样式

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

1001魏安复男2012-12-122002杜子腾女2011-11-113003史珍湘女2010-10-104004梅读女2009-10-105005赖月金男2008-01-01总计5条数据

1) 设置表格的边框

border：设置表格边框；

border-collapse：设置边框分离，合并默认是separate(分离)collapse合并；

border-spacing：设置单元格的间距；

padding：设置单元格内容和边框之间的距离；

.t{

border: 1px gray solid;

border-spacing: 0px;

border-collapse: collapse;

}

.t td{

border: 1px gray solid;

padding: 5px;

}

.t th{

border: 1px gray solid;

padding: 5px;

}

2) 设置表格的宽度

table-layout

默认auto自动方式，根据单元格的内容自动调整宽度；

fixed固定方式表格宽度固定；

.t{

border: 1px gray solid;

border-spacing: 0px;

border-collapse: collapse;

width: 500px;

table-layout: fixed;

}

.t td{

border: 1px gray solid;

padding: 5px;

}

.t th{

border: 1px gray solid;

padding: 5px;

}

3) 设置表格隔行换色

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

.t{

border: 1px gray solid;

border-spacing: 0px;

border-collapse: collapse;

width: 500px;

table-layout: fixed;

}

.t tr{ background-color: #CCC; }

.t td{

border: 1px gray solid;

padding: 5px;

}

.t th{

border: 1px gray solid;

padding: 5px;

}

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

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

th+td{text-align: center;}

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

.t{

border: 1px gray solid;

border-spacing: 0px;

border-collapse: collapse;

width: 500px;

table-layout: fixed;

}

.t tr{

background-color: #CCC;

}

.t td{

border: 1px gray solid;

padding: 5px;

}

.t th{

border: 1px gray solid;

padding: 5px;

}

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

th+td{ text-align: center; }

th+td+td+td{

text-align: center;

background-color: red;

}

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

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

.t{

border: 1px gray solid;

border-spacing: 0px;

border-collapse: collapse;

width: 500px;

table-layout: fixed;

}

.t caption{ font-size: 24px; }

.t tr{ background-color: #CCC; }

.t td{

border: 1px gray solid;

padding: 5px;

}

.t th{

border: 1px gray solid;

padding: 5px;

}

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

th+td{ text-align: center; }

th+td+td+td{

text-align: center;

background-color: red;

}

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

分享到：

2019-01-06 10:43

浏览 31

评论