SOURCE

<div class="container">
		<table>
			<thead>
				<tr>
					<th>NameNameNameName</th>
					<th>Age</th>
					<th>Address</th>
					<th>Tags</th>
					<th>Action</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<a href="#">John Brown</a>
					</td>
					<td>32</td>
					<td>New</td>
					<td>
						<span class="tag green">NICE</span>
						<span class="tag blue">DEVELOPER</span>
					</td>
					<td>
						<div class="action">
							<a href="#">Invite John Brown</a>
						</div>
						<div class="del">
							<a href="#">Delete</a>
						</div>
					</td>
				</tr>
				<tr>
					<td>
						<a href="#">Jim Green</a>
					</td>
					<td>42</td>
					<td>London</td>
					<td>
						<span class="tag orange">LOSER</span>
					</td>
					<td>
						<div class="action">
							<a href="">Invite Jim Green</a>
						</div>
						<div class="del">
							<a href="#">Delete</a>
						</div>
					</td>
				</tr>
				<tr>
					<td>
						<a href="#">Joe Black</a>
					</td>
					<td>32</td>
					<td>SidneySidneySidneySidneySidney</td>
					<td>
						<span class="tag green">COOL</span>
						<span class="tag blue">TEACHER</span>
					</td>
					<td>
						<div class="action">
							<a href="#">Invite Joe Black</a>
						</div>
						<div class="del">
							<a href="#">Delete</a>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
		<ul class="page">
			<li class="ft" title="上一页">
				<button>
					<svg viewBox="64 64 896 896" focusable="false" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path>
					</svg>
				</button>
			</li>
			<li class="ft one" title="1">
				<a href="#">1</a>
			</li>
			<li class="ft" title="下一页">
				<button>
					<svg viewBox="64 64 896 896" focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path>
					</svg>
				</button>
			</li>
		</ul>
	</div>

* {
			margin: 0;
			padding: 0;
		}
		a {
			text-decoration: none;
			color: #1890ff;
		}
		li {
			list-style: none;
		}
		.container {
			position: relative;
			border: 1px solid #f0f0f0;
			padding: 42px 24px 50px;
			background-color: #fff;
		}
		table {
			width: 100%;
			table-layout: auto;
			text-align: left;
			font-size: 14px;
			border-collapse: collapse;
		}
		thead tr th {
			padding: 16px;
			font-weight: 500;
			color: rgba(0,0,0,.85);
			background-color: #fafafa;
			border-bottom: 1px solid #f0f0f0;
		}
		tbody tr {
			border-bottom: 1px solid #f0f0f0;
			color: rgba(0, 0, 0, 0.65);
		}
		tbody tr:hover {
			background-color: #fafafa;
		}
		tbody tr td {
			padding: 16px;
		}
		.tag {
			display: inline-block;
			border: 1px solid #d9d9d9;
			padding: 0 7px;
			margin-right: 8px;
			font-size: 12px;
			line-height: 20px;
		}
		.green {
			color: #52c41a;
			background-color: #f6ffed;
			border-color: #b7eb8f;
		}
		.blue {
			color: #2f54eb;
    		background-color: #f0f5ff;
    		border-color: #adc6ff;
		}
		.orange {
			color: #fa541c;
    		background-color: #fff2e8;
    		border-color: #ffbb96;
		}
		.action {
			display: inline-block;
			margin-right: 16px;
		}
		.del {
			display: inline-block;
		}
		.page {
			position: absolute;
			right: 24px;
			margin: 16px 0;
		}
		.page .ft {
			display: inline-block;
			float: left;
			width: 32px;
			height: 32px;
			margin-right: 8px;
			border: 1px solid #d9d9d9;
			text-align: center;
			border-radius: 2px;
		}
		.page .one {
			border: 1px solid #1890ff;
			line-height: 32px;	
		}
		.page .one a {
			color: rgba(0, 0, 0, 0.65);
			font-weight: 500;
			font-size: 14px;
			color: #1890ff;
		}
		.page .ft button {
			display: inline-block;
			width: 100%;
			height: 100%;
			border: 1px solid transparent;
			border-radius: 2px;
			background-color: #fff;
			color: rgba(0,0,0,.25);
		}
		.page svg {
			width: 12px;
			height: 12px;
			vertical-align: middle;
		}