console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
<th>Tags</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a>John Brown</a>
</td>
<td>32</td>
<td>New York No. 1 Lake Park</td>
<td>
<table>
<span class="tag tag-green">Nice</span>
<span class="tag tag-blue"> DEVELOPER</span>
</table>
</td>
<td>
<a>Invite John Brown</a>
<a>Delete</a>
</td>
</tr>
<tr>
<td>
<a>Jim Green</a>
</td>
<td>42</td>
<td>New York No. 1 Lake Park</td>
<td>
<table>
<span class="tag tag-red">LOSER</span>
</table>
</td>
<td>
<a>Invite Jim Green</a>
<a>Delete</a>
</td>
</tr>
<tr>
<td>
<a>Joe Black</a>
</td>
<td>32</td>
<td>Sidney No. 1 Lake Park</td>
<td>
<table>
<span class="tag tag-green">COOL</span>
<span class="tag tag-blue">TEACHER</span>
</table>
</td>
<td>
<a>
Invite Joe Black</a>
<a>Delete</a>
</td>
</tr>
</tbody>
</table>
<div class="under-table">
<div class="under">
<div class="false">
<div>></div>
</div>
<div class="true">
<div>1</div>
</div>
<div class="false">
<div><</div>
</div>
</div>
</div>
</body>
</html>
.table {
margin: auto;
width: 80%;
border-radius: 2px;
}
.table > thead {
background-color:#fafafa;
}
thead > th {
text-align: left;
padding: 16px;
color: rgba(0, 0, 0, 0.85);
font-weight: 500px;
border-bottom: 1px solid #f0f0f0;
}
thead > tr :nth-child(1) {
border-top-left-radius: 2px;
}
thead > tr:last-child {
border-top-left-radius: 2px;
}
tbody > td {
text-align: left;
padding: 16px;
font-size: 14px;
color: rgba(0,0,0,.65);
border-bottom: 1px solid #f0f0f0;
transition: .3s ease;
overflow-wrap: break-word;
}
a {
color: #1890ff;
}
.tag {
margin-right: 8px;
padding: 0 7px;
font-size: 12px;
border-radius: 2px;
}
.tag-red{
color: #fa5413;
background-color:#fff2e8ef;
border:1px solid #f1b391;
}
.tag-green {
color: #49be0f;
background-color: #f6ffed;
border:1px solid #b1ec83;
}
.tag-blue {
color: #2c50e0;
background-color: #f0f5fff3;
border: 1px solid #a7bef3;
}
.under-table {
float: right;
margin-top: 16px;
margin-right: 100px;
}
.under > div > div {
color: #1687f1;
margin: 6px;
}
.under > div {
float: right;
width: 32px;
height: 32px;
text-align: center;
font-size: 14px;
padding: 0;
color: rgba(0,0,0,.45);
border-radius: 2px;
}
.true {
border: 1px solid #1789f3;
margin: 0 8px;
}
.false {
border: 1px solid #f0f0f0;
}