<!DOCTYPE html>
<html>
<head>
<title>Table Using jQuery</title>
<style>
#tableWrapper {
width: 100%;
height: 200px; /* 设置表格容器的高度 */
overflow: auto; /* 添加滚动条 */
margin-top: -10px; /* 负的外边距值，根据实际情况调整 */
}
#table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
background-color: rgba(0, 0, 0, 0);
}
#table th,
#table td {
border: 1px solid #ccc;
padding: 8px;
background-color: #f9fafb;
}
#table tr:nth-child(odd) {
background-color: #cfdff5;
}
#table th {
background-color: #f9fafb;
position: sticky;
top: 0;
}
#tableWrapper {
height: 200px; /* 设置表格容器的高度为固定值 */
overflow: auto; /* 添加滚动条 */
}
#tableWrapper {
height: 200px; /* 设置表格容器的高度为固定值 */
overflow: auto; /* 添加滚动条 */
}
/* 设置滚动条的高度与表格容器的高度一致 */
#tableWrapper::-webkit-scrollbar {
width: 10px;
height: 100%; /* 设置滚动条的高度为100% */
}
/* 其他滚动条样式设置 */
#tableWrapper::-webkit-scrollbar-track {
background-color: #f1f1f1;
}
#tableWrapper::-webkit-scrollbar-thumb {
background-color: #888;
}
#tableWrapper::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
</style>
</head>
<body>
<div id="tableWrapper">
<table id="table">
<thead>
<tr>
<th>日期</th>
<th>姓名</th>
<th>地址</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var tableData = [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
];
$(document).ready(function() {
var $tableBody = $('#tableBody');
$.each(tableData, function(index, item) {
var $row = $('<tr>');
if (index === 0) {
$row.append($('<td>').attr('colspan', 2).text(item.date + ' / ' + item.name));
} else {
$row.append($('<td>').text(item.date));
$row.append($('<td>').text(item.name));
}
$row.append($('<td>').text(item.address));
$tableBody.append($row);
});
});
</script>
</body>
</html>效果如下
