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

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.