CSS表格非常常見，它可以非常方便的呈現數據。但是有時候，我們的數據可能會比較多，導致表格內容超出了頁面，這時候我們一般會使用滾動條來控制表格的垂直滾動。那么怎么實現這個功能呢？下面我們來一步步學習。

首先，我們需要定義一個包含表格的div，代碼如下：

<div id="table-container">
<table>
...
</table>
</div>

然后，我們需要給這個div定義樣式，讓它具有固定高度、垂直溢出自動滾動的特性，代碼如下：

#table-container {
height: 300px; /* 定義div的高度，可以根據實際情況修改 */
overflow-y: auto; /* 溢出自動滾動 */
}

最后，我們需要對表格的樣式進行微調，讓表格可以適應這個div的高度，代碼如下：

table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tr:hover {
background-color: #f5f5f5;
}
tbody {
display: block;
height: 100%;
overflow-y: auto;
}

注意，在這段代碼中，我們對tbody標簽進行了處理，將它的display屬性設置為block，這樣它就可以適應父元素（即div）的高度。同時，我們也將tbody的overflow-y屬性設置為auto，以便根據需要進行垂直滾動。

好了，以上就是實現CSS表格內容超出垂直滾動的全部步驟，希望對你有所幫助。