HTML 自适应订单号列表模板 - 每页显示5个，支持手动分页
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>订单号列表</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
<pre><code> body {
font-family: Arial, Helvetica, sans-serif;
background-color: #f2f2f2;
}
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
margin-top: 50px;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
table {
border-collapse: collapse;
width: 100%;
}
table th, table td {
padding: 10px;
border: 1px solid #ddd;
text-align: left;
}
table th {
background-color: #f2f2f2;
font-weight: bold;
}
.pagination {
display: flex;
justify-content: center;
margin-top: 20px;
}
.pagination a {
display: block;
padding: 10px;
background-color: #fff;
border: 1px solid #ddd;
color: #333;
margin-right: 10px;
text-decoration: none;
}
.pagination a:hover {
background-color: #333;
color: #fff;
}
.pagination .active {
background-color: #333;
color: #fff;
}
</style>
</code></pre>
</head>
<body>
<div class='container'>
<h1>订单号列表</h1>
<table>
<thead>
<tr>
<th>订单号</th>
<th>下单时间</th>
<th>订单金额</th>
<th>订单状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td>2021-01-01 10:00:00</td>
<td>99.99</td>
<td>已完成</td>
</tr>
<tr>
<td>1002</td>
<td>2021-01-02 11:00:00</td>
<td>199.99</td>
<td>待发货</td>
</tr>
<tr>
<td>1003</td>
<td>2021-01-03 12:00:00</td>
<td>299.99</td>
<td>待付款</td>
</tr>
<tr>
<td>1004</td>
<td>2021-01-04 13:00:00</td>
<td>399.99</td>
<td>已取消</td>
</tr>
<tr>
<td>1005</td>
<td>2021-01-05 14:00:00</td>
<td>499.99</td>
<td>已完成</td>
</tr>
<tr>
<td>1006</td>
<td>2021-01-06 15:00:00</td>
<td>599.99</td>
<td>待收货</td>
</tr>
<tr>
<td>1007</td>
<td>2021-01-07 16:00:00</td>
<td>699.99</td>
<td>已完成</td>
</tr>
<tr>
<td>1008</td>
<td>2021-01-08 17:00:00</td>
<td>799.99</td>
<td>待评价</td>
</tr>
<tr>
<td>1009</td>
<td>2021-01-09 18:00:00</td>
<td>899.99</td>
<td>待付款</td>
</tr>
<tr>
<td>1010</td>
<td>2021-01-10 19:00:00</td>
<td>999.99</td>
<td>已完成</td>
</tr>
</tbody>
</table>
<div class='pagination'>
<a href='#'>上一页</a>
<a href='#' class='active'>1</a>
<a href='#'>2</a>
<a href='#'>下一页</a>
</div>
</div>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/l48Z 著作权归作者所有。请勿转载和采集!