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

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;


Let us see an example −

<!DOCTYPE html>
      Display table with vertical scrollbar
      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 {
<p>(Vertical Scroll in a Table)</p>
   <table class="scrolldown">