Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Create an HTML Table with a Fixed Left Column and Scrollable Body?
A table is basically a structured collection of data comprising of rows and columns (tabular data). HTML tables enable web designers to organize data like text, images, links, other tables, and so on into rows and columns of cells. They are created with the <table> tag, which incorporates the <tr> tag for table rows, the <th> tag for table headers and the <td> tag for data cells. By default, the elements under <td> are regular and left aligned.
Example
Let us have a look at the example below which demonstrates a simple table in HTML.
<!DOCTYPE html>
<html>
<head>
<title>An example of a simple table</title>
</head>
<body>
<table>
<tr>
<th>Country</th>
<th>Capital</th>
</tr>
<tr>
<td>India</td>
<td>New Delhi</td>
</tr>
<tr>
<td>United States of America</td>
<td>Washington D.C.</td>
</tr>
<tr>
<td>United Kingdom</td>
<td>London</td>
</tr>
</tr>
</table>
</body>
</html>
We can also make tables look more presentable by using CSS styling properties such as border, background-color, padding, margin, position, rowspan, colspan etc.
In this tutorial we will discuss the methods to create a HTML table with a fixed left column and scrollable body.
Using Position and Overflow Properties
The position property of an element specifies the type of positioning method used (static, relative, absolute, fixed, or sticky).
Syntax
Following is the syntax
position: static|absolute|fixed|relative|sticky;
Where,
Static: Elements are rendered in the order in which they appear in the document flow.
Absolute: The element is positioned in relation to its first (static) ancestor element.
Fixed: The element is placed in relation to the browser window.
Relative: The element is positioned relative to its default position, so "right:10px" adds 10 pixels to the right position of the element.
Sticky: The element's position is determined by the user's scroll position. Depending on the scroll position, a sticky element switches between relative and fixed mode. It is positioned relative until a given offset position in the viewport is met, at which point it "sticks" in place (like position: fixed).
The Overflow Attribute
The overflow attribute describes what should happen if content extends outside of an element's box. When an element's content is too large to fit within a defined area, this attribute indicates whether to clip it or add scrollbars. Only block components with a specific height can use the overflow property.
Syntax
overflow: visible|hidden|clip|scroll|auto;
Where,
Visible: There is no overflow clipping. It renders outside the bounds of the element. This is the default setting.
Hidden: The overflow is clipped and the remaining content is hidden. Content can be scrolled programmatically.
Clip: The overflow is clipped and the remaining content is hidden. Scrolling is forbidden, including programmatic scrolling.
Scroll: The overflow is clipped, but a scroll bar is added to allow access to the remaining content.
Auto: In case of overflow clipping, a scroll bar should be added to allow access to the remaining content.
With a brief understanding of both the properties let us see how they can be used to create a fixed left column with a scrollable body.
Using Position:absolute with the Overflow-x:visible
When a block-level element overflows at the left and right edges, the overflow-x property specifies whether to clip the content, add a scroll bar, or display overflow content.
Example
The example below creates a fixed left column with a scrollable body by setting an absolute position and a fixed width for the left column and setting overflow-x property to scroll for the entire table.
<!DOCTYPE html>
<html>
<head>
<title>
How to Create an HTML Table with a Fixed Left Column and Scrollable Body?
</title>
<style>
table {
border-spacing: 0;
border-top:1px solid deeppink;
}
td{
border: 1px solid deeppink;
border-top-width: 0px;
letter-spacing:2px;
text-align:center;
background:lavenderblush;
}
th{
border: 1px solid deeppink;
border-top-width: 0px;
letter-spacing:3px;
text-align:center;
background:lightpink;
color:white;
}
div {
width: 230px;
overflow-x: scroll;
margin-left: 146px;
overflow-y: visible;
padding: 0;
}
.left {
position: absolute;
width: 150px;
left: 0;
border-top-width: 1px;
margin-top: -1px
}
</style>
</head>
<body>
<div>
<table class="fixed">
<tr>
<th class="left">ROLL NO.</th>
<th>NAME</th>
<th>MATHEMATICS</th>
<th>PHYSICS</th>
<th>CHEMISTRY</th>
</tr>
<tr>
<td class="left">01</td>
<td>Dimple</td>
<td>100</td>
<td>99</td>
<td>99</td>
</tr>
<tr>
<td class="left">02</td>
<td>Celina</td>
<td>99</td>
<td>97</td>
<td>96</td>
</tr>
<tr>
<td class="left">03</td>
<td>Rishi</td>
<td>96</td>
<td>94</td>
<td >92</td>
</tr>
<tr>
<td class="left">04</td>
<td>Zeenat</td>
<td>93</td>
<td>90</td>
<td>89</td>
</tr>
<tr>
<td class="left">05</td>
<td>Harsh</td>
<td>90</td>
<td>87</td>
<td>85</td>
</tr>
</table>
</div>
</body>
</html>
Using Position:sticky
The following example shows how we can create a table with a fixed left column and scrollable body by setting the position property of the left column to sticky. In this method we will not be using the overflow property.
Example
<!DOCTYPE html>
<html>
<head>
<title>
How to Create an HTML Table with a Fixed Left Column and Scrollable Body?
</title>
<style>
table{
border:2px solid navy;
border-spacing:0;
}
td, th{
border:1px solid lightblue;
}
.exterior {
margin: auto;
width: 350px;
}
.interior {
position: relative;
overflow: auto;
white-space: nowrap;
}
.left {
position: sticky;
background-color: white;
}
.col1 {
width: 100px;
min-width: 100px;
max-width: 150px;
left: 0px;
}
</style>
</head>
<body>
<div class="exterior">
<div class="interior">
<table class="table">
<thead>
<tr>
<th class="left col1">EMPLOYEE ID</th>
<th>NAME</th>
<th>AGE</th>
<th>DEPARTMENT</th>
<th>EXPERIENCE</th>
</tr>
</thead>
<tbody>
<tr>
<td class="left col1">65</td>
<td>Anisha Reddy</td>
<td>25</td>
<td>Operations</td>
<td>2 years</td>
</tr>
<tr>
<td class="left col1">210</td>
<td>Alfiya Karim</td>
<td>21</td>
<td>Sales Stratergy</td>
<td>0 years</td>
</tr>
<tr>
<td class="left col1">149</td>
<td>Rohan Sharma</td>
<td>30</td>
<td>Digital Marketing</td>
<td>1 year</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
398 Views
