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
-
Economics & Finance
HTML table with 100% width, with vertical scroll inside tbody
Creating an HTML table with 100% width and vertical scroll inside the <tbody> allows you to display large datasets while keeping the header fixed and maintaining the table's full width. This is particularly useful for displaying long lists of data in a constrained space.
Syntax
The key CSS properties for creating a scrollable tbody are
table thead, table tbody {
display: block;
}
table tbody {
height: [fixed-height];
overflow-y: auto;
overflow-x: hidden;
}
The display: block property converts the table sections into block elements, allowing height and overflow properties to work properly.
CSS Properties for Vertical Scroll
To enable vertical scrolling within the tbody, we use the following CSS properties
overflow-y: autoShows a vertical scrollbar when content exceeds the specified height.overflow-x: hiddenHides any horizontal scrollbar to maintain clean appearance.heightSets a fixed height for the tbody to constrain the content area.display: blockConverts table elements to block-level for proper overflow behavior.
Basic Scrollable Table Example
Following example demonstrates a simple table with vertical scroll in the tbody
<!DOCTYPE html>
<html>
<head>
<title>Basic Scrollable Table</title>
<style>
.scroll-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: 2px solid #333;
}
.scroll-table thead,
.scroll-table tbody {
display: block;
}
.scroll-table thead tr th {
background: #4CAF50;
color: white;
padding: 12px;
text-align: left;
border-bottom: 2px solid #333;
}
.scroll-table tbody {
height: 150px;
overflow-y: auto;
overflow-x: hidden;
}
.scroll-table tbody tr td {
padding: 10px;
border-bottom: 1px solid #ddd;
background: #f9f9f9;
}
.scroll-table thead tr th,
.scroll-table tbody tr td {
width: 150px;
min-width: 150px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Employee List</h2>
<table class="scroll-table">
<thead>
<tr>
<th>Name</th>
<th>Department</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr><td>John Smith</td><td>Engineering</td><td>$75,000</td></tr>
<tr><td>Jane Doe</td><td>Marketing</td><td>$65,000</td></tr>
<tr><td>Mike Johnson</td><td>Sales</td><td>$55,000</td></tr>
<tr><td>Sarah Wilson</td><td>HR</td><td>$60,000</td></tr>
<tr><td>David Brown</td><td>Engineering</td><td>$80,000</td></tr>
<tr><td>Lisa Davis</td><td>Finance</td><td>$70,000</td></tr>
<tr><td>Tom Miller</td><td>IT</td><td>$72,000</td></tr>
</tbody>
</table>
</body>
</html>
The output shows a table with a fixed header and scrollable body content
Employee List ??????????????????????????????????????????? ? Name ? Department ? Salary ? (Fixed Header) ??????????????????????????????????????????? ? John Smith ? Engineering ? $75,000 ? ? Jane Doe ? Marketing ? $65,000 ? (Scrollable ? Mike Johnson? Sales ? $55,000 ? Content) ? Sarah Wilson? HR ? $60,000 ? ??????????????????????????????????????????? [Scrollbar]
Advanced Scrollable Table with Styling
Following example shows a more styled scrollable table with player rankings
<!DOCTYPE html>
<html>
<head>
<title>Player Rankings - Scrollable Table</title>
<style>
.rankings-table {
width: 100%;
border-spacing: 0;
border: 2px solid #333;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.rankings-table thead,
.rankings-table tbody {
display: block;
}
.rankings-table thead tr th {
height: 50px;
line-height: 50px;
background: #e74c3c;
color: white;
font-weight: bold;
text-align: center;
border-right: 1px solid white;
}
.rankings-table tbody {
height: 200px;
overflow-y: auto;
overflow-x: hidden;
border-top: 2px solid #333;
}
.rankings-table tbody tr:nth-child(even) {
background: #f39c12;
}
.rankings-table tbody tr:nth-child(odd) {
background: #e67e22;
}
.rankings-table tbody tr:hover {
background: #d35400;
color: white;
}
.rankings-table tbody td,
.rankings-table thead th {
width: 120px;
min-width: 120px;
border-right: 1px solid #333;
padding: 12px;
text-align: center;
}
.rankings-table tbody td:last-child,
.rankings-table thead th:last-child {
border-right: none;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; background: #ecf0f1;">
<h1 style="text-align: center; color: #2c3e50;">Player Rankings</h1>
<p style="text-align: center; color: #7f8c8d;">(Vertical Scroll in Table Body)</p>
<table class="rankings-table">
<thead>
<tr>
<th>Player</th>
<th>Country</th>
<th>Rank</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr><td>Virat Kohli</td><td>IND</td><td>1</td><td>895</td></tr>
<tr><td>David Warner</td><td>AUS</td><td>2</td><td>880</td></tr>
<tr><td>Steve Smith</td><td>AUS</td><td>3</td><td>875</td></tr>
<tr><td>Rohit Sharma</td><td>IND</td><td>4</td><td>860</td></tr>
<tr><td>Ben Stokes</td><td>ENG</td><td>5</td><td>855</td></tr>
<tr><td>Rashid Khan</td><td>AFG</td><td>6</td><td>850</td></tr>
<tr><td>Kieron Pollard</td><td>WI</td><td>7</td><td>840</td></tr>
<tr><td>Jos Buttler</td><td>ENG</td><td>8</td><td>835</td></tr>
<tr><td>Kagiso Rabada</td><td>SA</td><td>9</td><td>830</td></tr>
<tr><td>Trent Boult</td><td>NZ</td><td>10</td><td>825</td></tr>
</tbody>
</table>
</body>
</html>
The output displays a styled rankings table with alternating row colors and hover effects. The tbody scrolls vertically while maintaining the fixed header
Player Rankings
(Vertical Scroll in Table Body)
?????????????????????????????????????????
? Player ? Country ? Rank ? Points ? (Red Header)
?????????????????????????????????????????
? Virat Kohli ? IND ? 1 ? 895 ? (Orange rows)
? David Warner? AUS ? 2 ? 880 ?
? Steve Smith ? AUS ? 3 ? 875 ? (Scrollable)
? Rohit Sharma? IND ? 4 ? 860 ?
????????????????????????????????????????? [?] Scrollbar
Key Implementation Points
When creating scrollable tables, consider these important points
10K+ Views
