Open In App

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

Last Updated : 23 Jan, 2024
Improve
Improve
Like Article
Like
Save
Share
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



Previous Article
Next Article

Similar Reads

How to Add Vertical Scrollbar to React-Bootstrap Table Body ?
React Bootstrap is a popular library that combines the power of React with the styling capabilities of Bootstrap, allowing developers to create elegant and responsive user interfaces effortlessly. When working with tabular data in a web application. In this article, we will walk through the steps to add a vertical scrollbar to the body of a react-b
3 min read
What is the difference between 'width: 100%' and 'width: 100vw' in CSS ?
The CSS width Property is used to set the width of the text and images. The width can be assigned to the text and images in the form of pixels(px), percentages (%), centimeters (cm), etc. The width: 100% sets an element's width relative to its containing block, making it responsive within its parent. The width: 100% responds to the container's size
1 min read
How to add scroll into react-bootstrap Modal Body?
React Bootstrap provides a straightforward way to create modal dialogue the for your web applications. However, sometimes the content within the modal body can be too long to fit within modal's default height. In such cases, you might add a scrollbar to the modal body to ensure users can scroll through the content. In this article, we will walk you
2 min read
Hide scroll bar, but while still being able to scroll using CSS
To hide the scrollbar use -webkit- because it is supported by major browsers (Google Chrome, Safari or newer versions of Opera). There are many other options for the other browsers which are listed below: -webkit- (Chrome, Safari, newer versions of Opera): .element::-webkit-scrollbar { width: 0 !important } -moz- (Firefox): .element { overflow: -mo
3 min read
HTML width/height Attribute vs CSS width/height Property
In HTML 5, few elements follow the width and height attributes and maximum elements do not follow this attribute. Like img, iframe, canvas, and svg kind of elements follow the width and height attributes but div, span, article and section type of elements don't follow them.The width and height attributes are affected in img, svg tags, those are wea
3 min read
How to create a table with fixed header and scrollable body ?
The purpose of this article is to create a table with a fixed header and scrollable body. We can create such a table with either of the two approaches. By setting the position property to “sticky” and specifying "0" as a value of the top property for the &lt;th&gt; element.By setting the display to "block" for both &lt;thead&gt; and &lt;tbody&gt; e
2 min read
How to scroll to an element inside a div using javascript?
To scroll to an element inside a div using JavaScript, you can use the `scrollTop` property of the parent div, setting it to the target element's `offsetTop`. This adjustment allows you to smoothly navigate to a specific element within a scrollable container without using a full-page scroll. There are lots of methods to scroll to an element. The fo
3 min read
How to get the width of scroll bar using JavaScript ?
Given an HTML document and the task is to get the width of the scrollbar using JavaScript. There are two different approach to solve this problem which are discussed below: Approach 1: Create an element (div) containing scrollbar. OffsetWidth defines the width of an element + scrollbar width. ClientWidth defines the width of an element. So scrollba
3 min read
How to Make body height to 100% of the Browser Height ?
As a web developer, you may find yourself in a situation where you want to create a full-screen layout for your website. The way to achieve this is to make the &lt;body&gt; element take up 100% of the height of the browser window. This can be accomplished through the use of CSS. In this article, we will cover the following topics: What is the &lt;b
4 min read
Difference Between css(‘width’) and width() methods In jQuery
In jQuery, we have two ways to change the width of any HTML element. The jQuery css() method and width() method, below both the methods are described properly with the example. jQuery CSS('width') Method: It is a method present in jQuery which is used to get or set the property on the matched element. It is a property used to get or set the width o
3 min read