效果 :
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 表格容器样式,用flex布局可保证table内容能铺满剩余空间 */
.tbl-container {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
/* 设置表格的布局方式,用于宽度对齐 */
.tbl-header table{
border-bottom: none;
border-bottom-style: none;
table-layout: fixed;
}
.tbl-body table {
table-layout: fixed;
}
/* 设置表格内容容器,用于铺满整个剩余空间 */
.tbl-header {
padding-right: 17px;
}
.tbl-body {
height: 160px;
overflow-y: scroll;
}
table {
border-collapse: collapse;
}
table th{
width: 80px;
height: 25px;
text-align: center;
background-color: cornsilk;
}
table td{
width: 80px;
height: 25px;
text-align: center;
}
</style>
</head>
<body>
<!-- 表格容器,可用于设置整个的边框及高度 -->
<div class="tbl-container">
<!-- 表头容器,必须留出17px的滚动条位置 -->
<div class="tbl-header">
<table>
<thead>
<tr>
<th >排名</th>
<th >业务员</th>
<th >金额</th>
<th >订单</th>
<th >客户</th>
</tr>
</thead>
</table>
</div>
<!-- 表格内容容器-->
<div class="tbl-body">
<table >
<tbody>
</tbody>
</table>
</div>
</div>
<script>
// 1.先去准备好学生的数据
var datas = [{
name1: '小明',
subject1: '1',
name: '小明',
subject: '1',
score: 100
}, {
name1: '小新',
subject1: '1',
name: '小明',
subject: '1',
score: 98
}, {
name1: '小夏',
subject1: '1',
name: '小明',
subject: '1',
score: 99
}, {
name1: '小玉',
subject1: '1',
name: '小明',
subject: '1',
score: 88
}, {
name1: '小猪',
subject1: '1',
name: '小明',
subject: '1',
score: 0
},{
name1: '小明',
subject1: '1',
name: '小明',
subject: '1',
score: 100
}, {
name1: '小新',
subject1: '1',
name: '小明',
subject: '1',
score: 98
}, {
name1: '小夏',
subject1: '1',
name: '小明',
subject: '1',
score: 99
}, {
name1: '小玉',
subject1: '1',
name: '小明',
subject: '1',
score: 88
}, {
name1: '小猪',
subject1: '1',
name: '小明',
subject: '1',
score: 0
}];
// 2. 往tbody 里面创建行: 有几个人(通过数组的长度)我们就创建几行
var tbody = document.querySelector('tbody');
for (var i = 0; i < datas.length; i++) { // 外面的for循环管行 tr
// 1. 创建 tr行
var tr = document.createElement('tr');
tbody.appendChild(tr);
// 2. 行里面创建单元格(跟数据有关系的3个单元格) td 单元格的数量取决于每个对象里面的属性个数 for循环遍历对象 datas[i]
for (var k in datas[i]) { // 里面的for循环管列 td
// 创建单元格
var td = document.createElement('td');
// 把对象里面的属性值 datas[i][k] 给 td
// console.log(datas[i][k]);
td.innerHTML = datas[i][k];
tr.appendChild(td);
}
}
</script>
</body>
</html>