本文的方法是使用width属性创建宽度为100％的表, 并使用overflow-y属性创建表体内的垂直滚动。 Overflow属性用于在表中创建滚动条。使用显示：块；属性以显示块级元素。由于更改了tbody的显示属性, 因此我们也应该更改thead元素的属性, 以防止破坏表格布局。
例子：
<!DOCTYPE html>
<html>
<head>
<title>
Display table with vertical scrollbar
</title>
<style>
table.scrolldown {
width: 100%;
/* border-collapse: collapse; */
border-spacing: 0;
border: 2px solid black;
}
/* To display the block as level element */
table.scrolldown tbody, table.scrolldown thead {
display: block;
}
thead tr th {
height: 40px;
line-height: 40px;
}
table.scrolldown tbody {
/* Set the height of table body */
height: 50px;
/* Set vertical scroll */
overflow-y: auto;
/* Hide the horizontal scroll */
overflow-x: hidden;
}
tbody {
border-top: 2px solid black;
}
tbody td, thead th {
width : 200px;
border-right: 2px solid black;
}
td {
text-align:center;
}
</style>
</head>
<body>
<table class = "scrolldown">
<!-- Table head content -->
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
<th>Heading 4</th>
<th>Heading 5</th>
</tr>
</thead>
<!-- Table body content -->
<tbody>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
</tbody>
</table>
<body>
</html>输出如下：
