Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Selected Reading
HTML table with 100% width, with vertical scroll inside tbody
We will set the vertical scroll using the overflow-y property ?
overflow-y: auto;
We will hide the horizontal scroll using the overflow-x property ?
overflow-x: hidden;
Example
Let us see an example ?
<!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>
Output
Updated on: 2022-12-06T10:58:10+05:30
10K+ Views
Advertisements