資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
JavaScript
PHP
物理
化學
生物
數學
英語
經濟
心理學
社會科學
時尚研究
法律研究寬度為 100% 的 HTML 表格，tbody 內部可垂直滾動
我們使用 overflow-y 屬性設定垂直滾動
overflow-y: auto;
我們使用 overflow-x 屬性隱藏水平滾動
overflow-x: hidden;
示例
我們來看一個示例
<!DOCTYPE html>
<html>
<head>
<title>
Display table with vertical scrollbar
</title>
<style>
table.scrolldown {
width: 100%;
border-spacing: 0;
border: 1px solid black;
}
table.scrolldown tbody, table.scrolldown thead {
display: block;
}
thead tr th {
height: 60px;
line-height: 60px;
background: red;
color: white;
}
table.scrolldown tbody {
height: 120px;
overflow-y: auto;
overflow-x: hidden;
}
tbody {
border-top: 2px solid black;
background: orange;
}
tbody td, thead th {
width : 200px;
border-right: 1px solid black;
}
td {
text-align:center;
}
</style>
</head>
<body>
<h1>Rankings</h1>
<p>(Vertical Scroll in a Table)</p>
<table class="scrolldown">
<thead>
<tr>
<th>Player</th>
<th>Country</th>
<th>Rank</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>Virat</td>
<td>IND</td>
<td>1</td>
<td>90</td>
</tr>
<tr>
<td>David</td>
<td>AUS</td>
<td>2</td>
<td>80</td>
</tr>
<tr>
<td>Steve</td>
<td>AUS</td>
<td>3</td>
<td>70</td>
</tr>
<tr>
<td>Rohit</td>
<td>IND</td>
<td>4</td>
<td>60</td>
</tr>
<tr>
<td>Ben</td>
<td>ENG</td>
<td>5</td>
<td>55</td>
</tr>
<tr>
<td>Rashid</td>
<td>AFG</td>
<td>6</td>
<td>50</td>
</tr>
<tr>
<td>Pollard</td>
<td>WI</td>
<td>7</td>
<td>40</td>
</tr>
</tbody>
</table>
</body>
</html>
輸出
更新於：06-12-2022
9K+ 瀏覽
廣告