css表格样式
程序员文章站
2022-07-09 22:10:48
...
1. css表格样式
1) 设置表格的边框
2) 设置表格的宽度
3) 设置表格隔行换色
4) 设置表格列样式，使用连接选择器
5) 设置鼠标经过时行变色效果
<body>
<table class="t">
<caption>学生信息</caption>
<thead><tr><th>序号</th><th>学号</th><th>姓名</th><th>性别</th><th>出生日期</th></tr></thead>
<tbody>
<tr><th>1</th><td>001</td><td>魏安复</td><td>男</td><td>2012-12-12</td></tr>
<tr class="even"><th>2</th><td>002</td><td>杜子腾</td><td>女</td><td>2011-11-11</td></tr>
<tr><th>3</th><td>003</td><td>史珍湘</td><td>女</td><td>2010-10-10</td></tr>
<tr class="even"><th>4</th><td>004</td><td>梅读</td><td>女</td><td>2009-10-10</td></tr>
<tr><th>5</th><td>005</td><td>赖月金</td><td>男</td><td>2008-01-01</td></tr>
</tbody>
<tfoot><tr><th>总计</th><th colspan="4">5条数据</th></tr></tfoot>
</table>
</body>
1) 设置表格的边框
border：设置表格边框；
border-collapse：设置边框分离，合并默认是separate(分离)collapse合并；
border-spacing：设置单元格的间距；
padding：设置单元格内容和边框之间的距离；
<style type="text/css">
.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;
}
</style>
2) 设置表格的宽度
table-layout
默认auto自动方式，根据单元格的内容自动调整宽度；
fixed固定方式表格宽度固定；
<style type="text/css">
.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;
}
</style>
3) 设置表格隔行换色
tbody tr.even{background-color: #AAA;}
<style type="text/css">
.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; }
</style>
4) 设置表格列样式，使用连接选择器
th+td{text-align: center;}
th+td+td+td{text-align: center;background-color: red;}
<style type="text/css">
.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;
}
</style>
5) 设置鼠标经过时行变色效果
tbody tr:HOVER {background-color: aqua;}
<style type="text/css">
.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; }
</style>