0
点赞
收藏
分享

微信扫一扫

原生表格纵向滚动条

zhongjh 2022-12-22 阅读 139


 原生表格纵向滚动条

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--原生表格纵向滚动条-->
<style> td, th {
width: 1%; /*平均单元格宽度*/
}

tbody {
overflow-y: auto;
}

thead, tbody {
display: block;
}

table, tbody {
height: 100px; /*正文表格高度*/
}</style>
<title>原生表格纵向滚动条</title>
</head>
<body>
<table>
<thead>
<tr>
<td>表头1</td>
<td>表头2</td>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</tbody>
</table>
</body>
</html>

举报

相关推荐

0 条评论