<!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>
table tbody {
display:block;
height:200px;
overflow-y:scroll;
}
table thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
text-align:center;
}
thead th ,tbody td{
width:50px;
}
table thead {
width: calc( 100% - 1em );
}
</style>
</head>
<body>
<div style="width: 800px;">
<div class="table-head">
<table align="center" >
<thead>
<tr>
<th>序号</th>
<th>内容</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>我只是用来测试的</td></tr>
<tr><td>2</td><td>我只是用来测试的</td></tr>
<tr><td>3</td><td>我只是用来测试的</td></tr>
<tr><td>4</td><td>我只是用来测试的</td></tr>
<tr><td>5</td><td>我只是用来测试的</td></tr>
<tr><td>6</td><td>我只是用来测试的</td></tr>
<tr><td>7</td><td>我只是用来测试的</td></tr>
<tr><td>8</td><td>我只是用来测试的</td></tr>
</tbody>
</table>
</div>
</div>
</body>
</html> 竖向表头固定，横向随内容滚动，纯css，列宽有问题
猜你喜欢
转载自my.oschina.net/u/3768722/blog/1635730
今日推荐
周排行