<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 100%;
font-size: 12px;
/*改善表格呈现性能*/
table-layout: fixed;
/*隐藏不必要的干扰因素*/
empty-cells: show;
/*表格看起来更精致*/
border-collapse: collapse;
margin: 0 auto;
border: 1px solid #cad9ca;
color: #666;
}
th {
height: 30px;
overflow: hidden;
}
td {
height: 20px;
}
td,
th {
border: 1px solid #cad9ca;
padding: 0 1em 0;
}
tr:nth-child(even) {
background-color: #f5fafe;
}
</style>
</head>
<body>
<h1>优雅的设计表格</h1>
<table>
<tr>
<th>排名</th>
<th>校名</th>
<th>得分</th>
</tr>
<tr>
<th>1</th>
<th>PK</th>
<th>100</th>
</tr>
<tr>
<th>2</th>
<th>BJ</th>
<th>100</th>
</tr>
</table>
</body>
</html>
【CSS3实战】设计优雅的数据表格
于 2023-07-06 23:10:03 首次发布