Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML Table with 100% Width and 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