Table 设置滚动条,表头留出滚动条的空隙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 1115px;
height: 630px;
border: 1px solid #ccc;
border-radius: 5px;
margin-left: 10%;
margin-top: 5%;
text-align: center;
}
table tbody {
display: block;
height: 195px;
overflow-y: scroll;
overflow-x: :hidden;
}
table thead,
tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
table thead {
width: calc( 100% - 0.8em)
}
td {
border: 1px solid #ccc;
}
table thead th {
background: #ccc;
}
</style>
<body>
<div>
<table cellspacing="0" style="word-break:break-all;border-collapse:collapse">
<thead>
<tr>
<td>产品</td>
<td>订单号</td>
<td>客户</td>
<td>颜色</td>
</tr>
</thead>
<tbody>
<tr>
<td>生态</td>
<td>10-91</td>
<td>赵立斌</td>
<td>生态红</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>