- How to Create a Table with a Fixed Header and Scrollable Body
- Example of creating a table with a scrollable body by using the position property:
- Result
- Example of creating a table with a scrollable body by using the display property:
- Making Tables Scrollable in CSS
- Link to this section
- Link to this section
- Link to this section
- Table Scroll With HTML and CSS
- Method 1: How to Table Scroll Horizontally With HTML/CSS?
- Step 1: Add a div Container
- Step 2: Design a Table
- Step 3: Add Data in Table
- Step 5: Style div Container
- Output
- Step 6: Make Table Horizontally Scrollable
- Output
- Step 7: Style Table
- Step 6: Style Table Heading
- Method 2: How to Table Scroll Vertically With HTML/CSS?
- Output
- Conclusion
- Make HTML Table Scrollable
- Set the CSS overflow-y Property to scroll to Make HTML Table Scrollable
- Related Article — HTML Table
How to Create a Table with a Fixed Header and Scrollable Body
In this tutorial, find some methods of creating an HTML table, which has a fixed header and scrollable body. Of course, you need to use CSS.
It is possible to achieve such a result by setting the position property to “sticky” and specifying 0 as a value of the top property for the element.
As usual, you can open the Try it Yourself demo link and play with the properties to understand them better.
You can also read the comments in front of each line to understand the properties better.
Example of creating a table with a scrollable body by using the position property:
html> html> head> title>Title of the document title> style> .tableFixHead < overflow-y: auto; /* make the table scrollable if height is more than 200 px */ height: 200px; /* gives an initial height of 200px to the table */ > .tableFixHead thead th < position: sticky; /* make the table heads sticky */ top: 0px; /* table head will be placed from the top of the table and sticks to it */ > table < border-collapse: collapse; /* make the table borders collapse to each other */ width: 100%; > th, td < padding: 8px 16px; border: 1px solid #ccc; > th < background: #eee; > style> head> body> div class="tableFixHead"> table> thead> tr> th>Col 1 th> th>Col 2 th> tr> thead> tbody> tr> td>1.1 td> td>2.1 td> tr> tr> td>1.2 td> td>2.2 td> tr> tr> td>1.3 td> td>2.3 td> tr> tr> td>1.4 td> td>2.4 td> tr> tr> td>1.5 td> td>2.5 td> tr> tr> td>1.6 td> td>2.5 td> tr> tr> td>1.7 td> td>2.5 td> tr> tr> td>1.8 td> td>2.5 td> tr> tbody> table> div> body> html>Result
Great! Huh? But let’s face it! I don’t like to see that scrollbar starting from the head section of the table!
So, let’s continue to the next example and fix that issue together!
Thers’s another method of creating a table with a fixed header and scrollable body. In the example below, we set the display to “block” for the element so that it’s possible to apply the height and overflow properties.
Example of creating a table with a scrollable body by using the display property:
html> html> head> title>Title of the document title> style> .fixed_header < width: 400px; table-layout: fixed; border-collapse: collapse; > .fixed_header tbody < display: block; width: 100%; overflow: auto; height: 100px; > .fixed_header thead tr < display: block; > .fixed_header thead < background: black; color: #fff; > .fixed_header th, .fixed_header td < padding: 5px; text-align: left; width: 200px; > style> head> body> table class="fixed_header"> thead> tr> th>Col 1 th> th>Col 2 th> th>Col 3 th> th>Col 4 th> th>Col 5 th> tr> thead> tbody> tr> td>1 td> td>2 td> td>3 td> td>4 td> td>5 td> tr> tr> td>6 td> td>7 td> td>8 td> td>9 td> td>10 td> tr> tr> td>11 td> td>12 td> td>13 td> td>14 td> td>15 td> tr> tr> td>16 td> td>17 td> td>18 td> td>19 td> td>20 td> tr> tr> td>21 td> td>22 td> td>23 td> td>24 td> td>25 td> tr> tbody> table> body> html>As mentioned before, we used overflow: auto on the tbody along with the display: block .
Here’s our result, and enjoy the difference!
| Col 1 | Col 2 | Col 3 | Col 4 | Col 5 |
|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 |
| 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 |
As you have noticed, we didn’t use borders in the previous examples. However, if you need to add borders, you can simply use border property on all td tags.
.fixed_header td < border: 1px solid #797878; >| Col 1 | Col 2 | Col 3 | Col 4 | Col 5 |
|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 |
| 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 |
Making Tables Scrollable in CSS
Because HTML tables are set to display: table by default, adding scrollbars to them is a bit nonintuitive.
We can set our tables to display: block and modify their overflow from there, but I’ve found wrapping tables in containers to be more adaptable and flexible.
Link to this section
Vertical table scrollbars
First, let’s set up vertical scrolling.
div class="tableContainer"> table class="table"> . table> div> We can set a height for the table’s container and modify the table such that it will fit snug within the container:
.tableContainer < height: 300px; overflow: hidden; > .table < position: sticky; top: 0; width: 100%; > In this example, I set the height to 300px — but you can set it to whatever you want!
Our table will now have an inset vertical scrollbar and will expand no further than the height we set.
Link to this section
Horizontal table scrollbars
If you want to implement horizontal scrolling, there is an approach very similar to the vertical scrolling example:
.tableContainer < overflow: hidden; width: 800px; > .table < position: sticky; top: 0; width: 100%; > I set the width here to 800px , but again, you can change it to whatever you want.
If you want both horizontal and vertical scrollbars for your table, simply specify both a height and a width in .tableContainer .
Link to this section
And that’s how you can make your tables scrollable with just a bit of CSS!
I refer back to this snippet all the time, and I hope you found it useful too.
Table Scroll With HTML and CSS
When a user designs a database to manage employee data in a company, most of the data and records cannot fit into a single sheet or table. To manage the data, the user makes the sheet scrollable. There are two types of “scrollable”. The first is vertically scrollable, and the second is horizontally scrollable. Horizontal scrollable allows the user to scroll the contents of the window left or right. Whereas the vertical scrollbar allows the user to scroll up or down the content.
Method 1: How to Table Scroll Horizontally With HTML/CSS?
To make a table scroll horizontally with the HTML/CSS, first, design a table by utilizing the “ ” element. Then, set the “height” and “width” of the table in CSS and apply the “overflow” property with the value “scroll”.
For practical implications, try the below-stated method.
Step 1: Add a div Container
For the purpose of creating a div container, add the “ ” element in the HTML document.
Step 2: Design a Table
Next, utilize the “ ” tag for designing a table to add data to the HTML page. Then, add the following attribute inside the table tag:
- “cellspacing” determines the space in the table cell.
- “cellpadding” specifies the space between the cell’s walls and the cell data. It is an inline attribute utilized in the table tag to overwrite the CSS style. The value of the cellpadding is set in pixels and can be specified as “1” or “0” by default.
- “border” is utilized for adding space around the cell.
- Here, “width” defines the cell size in the table element.
Step 3: Add Data in Table
Next, add the following elements to add the data:
- “ ” element is utilized for defining the rows in the table.
- “ element determines a cell as the header of a group of table cells.
- “ ” is used to add the data in the table:
It can be seen that the table has been added successfully:
Step 5: Style div Container
Access the div container by using the defined attribute value with the attribute selector. To do so, the “#main-content” is utilized in this scenario:
Then, apply these CSS properties:
- “border” is used for defining the boundary around the element.
- “margin” determines the space outside of the defined element.
- “padding” allocates space inside the defined boundary.
Output
Step 6: Make Table Horizontally Scrollable
Now, utilize the class name to access the table and apply the below-stated properties to make the table horizontally scrollable:
According to the given code:
- “height” and “width” properties are utilized for settings the size of the element.
- “overflow” controls what happens to content that is lengthy to fit into an area.
Output
Step 7: Style Table
For the purpose of styling the table, access the “table” and table data with “td”:
- The “color” property is used for setting the color of the text in an element.
- “background” determines the color at the backside of the element.
Step 6: Style Table Heading
Access the table heading with the help of “th”:
Apply the “background-color” property to set the color at the element’s backside.
Method 2: How to Table Scroll Vertically With HTML/CSS?
To scroll the table vertically with the HTML/CSS, set the table width access the table with the help of the class name “.table-data” and apply the below-mentioned properties in the code snippet:
- The value of the “width” property is set “400px” for setting the size of the table.
- “height” is set to less than the width value to make the vertically scrollable.
- “overflow” property is utilized for making the scroll element if the element’s data is lengthy and cannot fit on the table.
Output
That’s all about the table scroll with HTML and CSS.
Conclusion
To make a table scroll with HTML and CSS, first, create a table by using the “ ” element. Then, access the table in CSS and apply “the height”, width, and “overflow” properties on the table. For that purpose, the value of the “overflow” is specified as “scroll”, which makes the element scrollable if the element’s data is length. This tutorial has explained the method for designing the scrollable table with the help of HTML and CSS.
Make HTML Table Scrollable
This article will introduce a method to make a vertically scrollable HTML table.
Set the CSS overflow-y Property to scroll to Make HTML Table Scrollable
When an HTML table is lengthy, a feature to scroll only the table, not the entire page, is needed. To achieve this functionality, we can use the overflow-y property.
Here, y represents the y axis. The property defines the overflow property of a block-level element along the vertical axis.
The scroll value makes the block-level element scrollable from top to bottom.
To make an HTML table vertically scrollable, we can wrap the table with a . Then, we can set a fixed height for the using the height property.
After that, we can set the overflow-y property to scroll . If the table height exceeds the height of the div we had set, then the overflow-y: scroll will make the table scrollable in the y-direction (vertically).
Therefore, we need to ensure that the height of the table exceeds the height of the .
For example, create a div and give it a class name of container . Inside that div , create a table and give it a class name of data .
Fill the table with data using tr , th , and td tags.
In CSS, select the container class and set its height property to 70px and its overflow-y property to scroll . Ensure the table contents have a height of more than 70px .
Next, select the table using the class selector and the table’s th and td elements. Then, set its border property to 1px solid black , border-collapse property to collapse and padding to 4px . (Note: This is not compulsory, this is to make the table more readable.)
The example below shows that the table is vertically scrollable, as the height of the table is more than that of the div or .container .
div class="container"> table class="data"> tr> th>idth> th>Nameth> th>Countryth> tr> tr> td>1td> td>John Doetd> td>Nepaltd> tr> tr> td>2td> td>Sam Smithtd> td>Indiatd> tr> tr> td>3td> td>Jack Danielstd> td>Chinatd> tr> table> div> .container height: 70px; overflow-y: scroll; > .data, th, td border: 1px solid black; border-collapse: collapse; padding: 4px; > As a result, the whole table is not visible as we load the page. It is because we have set 70px as the height of the container.
But when we scroll down vertically, we can see the rest of the table contents.
This way, we can make the HTML table vertically scrollable using the overflow-y property and setting it to scroll .
Related Article — HTML Table
Copyright © 2023. All right reserved