先贴效果图:
代码(关键部分已标 红色)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sort table example</title>
<style>
body {
font-size: 14px;
margin: 50px 30px;
}
table {
border: 2px solid #42b983;
border-radius: 5px;
background-color: #fff;
}
th {
background-color: #42b983;
color: rgba(255,255,255,0.66);
cursor: pointer;
}
td {
background-color: #f9f9f9;
}
th, td {
min-width: 90px;
padding: 10px 10px;
}
.arrow {
display: inline-block;
vertical-align: middle;
width: 0;
height: 0;
margin-left: 5px;
opacity: 0.66;
}
.arrow.asc {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid #fff;
}
.arrow.dsc {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #fff;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Name<span class="arrow asc"></span></th>
<th>Score<span class="arrow dsc"></span></th>
</tr>
</thead>
<tbody>
<tr>
<td>
Li Lei
</td>
<td>
100
</td>
</tr>
<tr>
<td>
Han Meimei
</td>
<td>
99
</td>
</tr>
</tbody>
</table>
</body>
</html>