在頁面設計中，經常需要使用表格來展現數據。但是當表格中的內容過多時，會導致表格過長，降低頁面的美觀度且不方便用戶查看。因此，我們需要使用CSS來解決這個問題。本文將介紹如何使用CSS實現表格的垂直自動滾動效果。

/* 創建一個固定高度的容器 */
.table-container {
height: 200px; /* 容器高度 */
overflow-y: scroll; /* 開啟垂直滾動條 */
}
/* 設置表格樣式 */
table {
width: 100%;
border-collapse: collapse;
}
table td, table th {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}

上述CSS代碼中，我們首先創建了一個固定高度的容器，將其高度設置為需要展示的內容高度。其次開啟了垂直滾動條，當內容超出容器高度時，就會自動出現滾動條。這樣，當表格內容過多時，就可以在固定高度的容器中進行展示，并且自動出現垂直滾動條了。

另外，需要注意的是，在表格樣式中，我們繼續為表格和單元格設置了樣式，但不影響垂直滾動效果的實現。這些樣式可以根據具體需求進行調整，本文僅提供了一個示例效果。