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

12 Mar, 2019
The approach of this article is to create table with 100% width using width property and create vertical scroll inside table body using overflow-y property. Overflow property is used to create scrollbar in table. Use display: block; property to display the block level element. Since changing the display property of tbody, we should change the property for thead element as well to prevent from breaking the table layout.
Example:
<!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>        </tbody>    </table><body>      </html>                    
Output:
HTML-Misc
Picked
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
HTTP headers | Content-Type
Design a Tribute Page using HTML & CSS
How to Insert Form Data into Database using PHP ?
How to position a div at the bottom of its container using CSS?
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array