Skip to content
Related Articles

Related Articles

How to create table with 100% width, with vertical scroll inside table body in HTML ?
  • Last Updated : 12 Mar, 2019
GeeksforGeeks - Summer Carnival Banner

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:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :