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
How to Create an HTML Table with a Fixed Left Column and Scrollable Body?
A table with a fixed left column and scrollable body is a powerful layout technique that keeps important identifier columns (like names, IDs, or categories) visible while allowing horizontal scrolling through additional data columns. This approach is especially useful for displaying wide datasets where users need constant reference to the leftmost column while exploring other data.
Creating such tables requires careful use of CSS positioning and overflow properties to achieve the desired fixed-column behavior while maintaining proper table structure and responsiveness.
Table Structure Basics
HTML tables are created with the <table> tag, incorporating <tr> for rows, <th> for headers, and <td> for data cells. For fixed-column tables, we apply specific CSS positioning to the leftmost column while allowing the rest to scroll horizontally.
Basic Table Example
<!DOCTYPE html>
<html>
<head>
<title>Basic Table Structure</title>
<style>
table { border-collapse: collapse; font-family: Arial, sans-serif; }
th, td { border: 1px solid #ddd; padding: 8px; text-align: center; }
th { background-color: #f4f4f4; }
</style>
</head>
<body>
<table>
<tr>
<th>Country</th>
<th>Capital</th>
<th>Population</th>
</tr>
<tr>
<td>India</td>
<td>New Delhi</td>
<td>1.4B</td>
</tr>
<tr>
<td>United States</td>
<td>Washington D.C.</td>
<td>331M</td>
</tr>
</table>
</body>
</html>
CSS Properties for Fixed Columns
Position Property
The position property specifies the positioning method used for an element
position: static|relative|absolute|fixed|sticky;
Key position values
static Default positioning in document flow
relative Positioned relative to its normal position
absolute Positioned relative to nearest positioned ancestor
fixed Positioned relative to viewport
sticky Switches between relative and fixed based on scroll position
Overflow Property
The overflow property controls what happens when content overflows an element's box
overflow: visible|hidden|scroll|auto; overflow-x: visible|hidden|scroll|auto; overflow-y: visible|hidden|scroll|auto;
Values for overflow control
visible Content is not clipped and renders outside the element
hidden Content is clipped and hidden
scroll Content is clipped but scrollbars are added
auto Scrollbars appear only when needed
Method 1: Using Position Absolute with Overflow
This method uses position: absolute for the fixed column and overflow-x: scroll on a wrapper div to create horizontal scrolling while keeping the left column fixed in place.
Example
<!DOCTYPE html>
<html>
<head>
<title>Fixed Left Column with Absolute Position</title>
<style>
table {
border-collapse: collapse;
font-family: Arial, sans-serif;
border: 1px solid #4285f4;
}
td, th {
border: 1px solid #4285f4;
border-top-width: 0;
padding: 10px;
text-align: center;
background: #f8f9fa;
}
th {
background: #4285f4;
color: white;
font-weight: bold;
}
.table-container {
width: 400px;
overflow-x: scroll;
margin-left: 120px;
overflow-y: visible;
position: relative;
}
.fixed-column {
position: absolute;
width: 120px;
left: -120px;
background: #e8f0fe;
z-index: 1;
}
.fixed-column th {
background: #1a73e8;
}
</style>
</head>
<body style="padding: 20px;">
<h2>Student Grades Table</h2>
<div class="table-container">
<table>
<tr>
<th class="fixed-column">STUDENT ID</th>
<th>NAME</th>
<th>MATHEMATICS</th>
<th>PHYSICS</th>
<th>CHEMISTRY</th>
<th>BIOLOGY</th>
</tr>
<tr>
<td class="fixed-column">STU001</td>
<td>Alice Johnson</td>
<td>95</td>
<td>88</td>
<td>92</td>
<td>87</td>
</tr>
<tr>
<td class="fixed-column">STU002</td>
<td>Bob Chen</td>
<td>89</td>
<td>91</td>
<td>85</td>
<td>90</td>
</tr>
<tr>
<td class="fixed-column">STU003</td>
<td>Carol Davis</td>
<td>93</td>
<td>89</td>
<td>94</td>
<td>91</td>
</tr>
</table>
</div>
</body>
</html>
This creates a table where the Student ID column remains visible while users can scroll horizontally to view additional subject columns.
Method 2: Using Position Sticky
The position: sticky approach provides a more modern and flexible solution. The sticky-positioned column switches between relative and fixed positioning based on the scroll position, creating a smoother user experience.
Example
<!DOCTYPE html>
<html>
<head>
<title>Fixed Left Column with Sticky Position</title>
<style>
.table-wrapper {
width: 500px;
margin: 20px auto;
border: 2px solid #2196f3;
border-radius: 8px;
overflow: hidden;
}
.table-scroll {
position: relative;
overflow-x: auto;
white-space: nowrap;
}
table {
border-collapse: collapse;
font-family: Arial, sans-serif;
width: 100%;
}
td, th {
border: 1px solid #e0e0e0;
padding: 12px 15px;
text-align: left;
}
th {
background-color: #2196f3;
color: white;
font-weight: bold;
}
td {
background-color: #fafafa;
}
.sticky-col {
position: sticky;
left: 0;
background-color: #e3f2fd;
z-index: 1;
min-width: 120px;
max-width: 120px;
}
.sticky-col th {
background-color: #1976d2;
}
</style>
</head>
<body>
<h2 style="text-align: center; font-family: Arial, sans-serif;">Employee Information Table</h2>
<div class="table-wrapper">
<div class="table-scroll">
<table>
<thead>
<tr>
<th class="sticky-col">EMPLOYEE ID</th>
<th>FULL NAME</th>
<th>AGE</th>
<th>DEPARTMENT</th>
<th>POSITION</th>
<th>EXPERIENCE</th>
<th>SALARY</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sticky-col"><strong>EMP065</strong></td>
<td>Anisha Reddy</td>
<td>28</td>
<td>Operations</td>
<td>Senior Analyst</td>
<td>3 years</td>
<td>$65,000</td>
</tr>
<tr>
<td class="sticky-col"><strong>EMP210</strong></td>
<td>Michael Thompson</td>
<td>32</td>
<td>Sales Strategy</td> 
3K+ Views
