Open In App

How to create table with 100% width, with vertical scroll inside table body in HTML ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

This article explains how to create a table with a 100% width using the `width` property. To add a vertical scroll bar inside the table body, use the `overflow-y` property. By changing the `display` property of `tbody` to `block`, we can display the block level element. However, when changing the `display` property of `tbody`, we must also change the property of `thead` to prevent the table layout from breaking.

Approach:

  • Apply the class `scroll down` to the table for styling.
  • Set `width: 100%` to make the table span the entire width.
  • Enable vertical scrolling in the tbody with `height: 50px` and `overflow-y: auto`.
  • Style columns with a fixed width (`width: 200px`) and borders.
  • Improve header appearance with a fixed height and centered content.

Example: In this article, we will see how to create table with 100% width, with vertical scroll inside table body in HTML.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        Display table with vertical scrollbar
    </title>
 
    <style>
        table.scrolldown {
            width: 100%;
 
            /* border-collapse: collapse; */
            border-spacing: 0;
            border: 2px solid black;
        }
 
        /* To display the block as level element */
        table.scrolldown tbody,
        table.scrolldown thead {
            display: block;
        }
 
        thead tr th {
            height: 40px;
            line-height: 40px;
        }
 
        table.scrolldown tbody {
 
            /* Set the height of table body */
            height: 50px;
 
            /* Set vertical scroll */
            overflow-y: auto;
 
            /* Hide the horizontal scroll */
            overflow-x: hidden;
        }
 
        tbody {
            border-top: 2px solid black;
        }
 
        tbody td,
        thead th {
            width: 200px;
            border-right: 2px solid black;
        }
 
        td {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <table class="scrolldown">
 
        <!-- Table head content -->
        <thead>
            <tr>
                <th>Heading 1</th>
                <th>Heading 2</th>
                <th>Heading 3</th>
                <th>Heading 4</th>
                <th>Heading 5</th>
            </tr>
        </thead>
 
        <!-- Table body content -->
        <tbody>
            <tr>
                <td>Content</td>
                <td>Content</td>
                <td>Content</td>
                <td>Content</td>
                <td>Content</td>
            </tr>
 
            <tr>
                <td>Content</td>
                <td>Content</td>
                <td>Content</td>
                <td>Content</td>
                <td>Content</td>
            </tr>
            <tr>
                <td>Content</td>
                <td>Content</td>
                <td>Content</td>
                <td>Content</td>
                <td>Content</td>
            </tr>
            <tr>
                <td>Content</td>
                <td>Content</td>
                <td>Content</td>
                <td>Content</td>
                <td>Content</td>
            </tr>
            <tr>
                <td>Content</td>
                <td>Content</td>
                <td>Content</td>
                <td>Content</td>
                <td>Content</td>
            </tr>
        </tbody>
    </table>
 
    <body>
 
</html>


Output:

hyu



Last Updated : 23 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads