HTML table with 100% width, with vertical scroll inside tbody

HTML Web Development Front End Technology

We will set the vertical scroll using the overflow-y property −

overflow-y: auto;

We will hide the horizontal scroll using the overflow-x property −

overflow-x: hidden;

Example

Let us see an example −

<!DOCTYPE html>
<html>
<head>
   <title>
      Display table with vertical scrollbar
   </title>
   <style>
      table.scrolldown {
         width: 100%;
         border-spacing: 0;
         border: 1px solid black;
      }
          
      table.scrolldown tbody, table.scrolldown thead {
         display: block;
      }   
      thead tr th {
         height: 60px; 
         line-height: 60px;
         background: red;
         color: white;
      }          
      table.scrolldown tbody {
         height: 120px; 
         overflow-y: auto;
         overflow-x: hidden; 
      }
          
      tbody { 
         border-top: 2px solid black;
         background: orange;
      }
          
      tbody td, thead th {
         width : 200px;
         border-right: 1px solid black;
      }
      td {
         text-align:center;
      }
   </style>
</head>
<body>
<h1>Rankings</h1>
<p>(Vertical Scroll in a Table)</p>
   <table class="scrolldown">
      <thead>
         <tr>
            <th>Player</th>
            <th>Country</th>
            <th>Rank</th>
            <th>Points</th>
         </tr>
      </thead>   
      <tbody>
         <tr>
            <td>Virat</td>
            <td>IND</td>
            <td>1</td>
            <td>90</td>
         </tr>
         <tr>
            <td>David</td>
            <td>AUS</td>
            <td>2</td>
            <td>80</td>
         </tr>
         <tr>
            <td>Steve</td>
            <td>AUS</td>
            <td>3</td>
            <td>70</td>
         </tr>
         <tr>
            <td>Rohit</td>
            <td>IND</td>
            <td>4</td>
            <td>60</td>
         </tr>
         <tr>
            <td>Ben</td>
            <td>ENG</td>
            <td>5</td>
            <td>55</td>
         </tr>
         <tr>
            <td>Rashid</td>
            <td>AFG</td>
            <td>6</td>
            <td>50</td>
         </tr>
         <tr>
            <td>Pollard</td>
            <td>WI</td>
            <td>7</td>
            <td>40</td>
         </tr>
      </tbody>
   </table>
</body>   
</html>