[html] How to set tbody height with overflow scroll

I am facing problem while setting tbody height width overflow scroll.

<style> 
     tbody{
       height:50px;display:block;overflow:scroll
     }
   </style>

       <h3>Table B</h3>
    <table style="border: 1px solid red;width:300px;display:block">
        <thead>
            <tr>
                <td>Name</td>
                <td>phone</td>
            </tr>
        </thead>
        <tbody style='height:50px;display:block;overflow:scroll'>
            <tr>
                <td>AAAA</td>
                <td>323232</td>
            </tr>
            <tr>
                <td>BBBBB</td>
                <td>323232</td>
            </tr>
            <tr>
                <td>CCCCC</td>
                <td>3435656</td>
            </tr>
        </tbody>
    </table>

Visit my fiddle here

I want table B like Table A with overflow scroll.

Any help will be appreciated.

Many Thanks, M.

This question is related to html css

The answer is


Here is a good example for table scrolling across x and y way. Horizontal and vertical scrolling is the best thing for responsive table.

_x000D_
_x000D_
table, th, tr, td {
  border: 1px solid lightgrey;
  border-collapse: collapse;
  
}
tbody {
  max-height: 200px;
max-width: 200px;
  overflow: auto;
  display: block;
  table-layout: fixed;
}

tr {
  display: table;
}
_x000D_
<table>
  <thead>
      <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </tr>
  </thead>
  <tbody>
      <tr>
    <th>
     <input type="checkbox"> 
  </th>
    <td>2</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
  </tr>
    <tr>
    <th>
     <input type="checkbox"> 
  </th>
    <td>2</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
  </tr>
    <tr>
    <th>
     <input type="checkbox"> 
  </th>
    <td>2</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
  </tr>
    <tr>
    <th>
     <input type="checkbox"> 
  </th>
    <td>2</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
  </tr>
    <tr>
    <th>
     <input type="checkbox"> 
  </th>
    <td>2</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
  </tr>
    <tr>
    <th>
     <input type="checkbox"> 
  </th>
    <td>2</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
  </tr>
    <tr>
    <th>
     <input type="checkbox"> 
  </th>
    <td>2</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
  </tr>
    <tr>
    <th>
     <input type="checkbox"> 
  </th>
    <td>2</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
  </tr>
    <tr>
    <th>
     <input type="checkbox"> 
  </th>
    <td>2</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
  </tr>
    <tr>
    <th>
     <input type="checkbox"> 
  </th>
    <td>2</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
  </tr>
    <tr>
    <th>
     <input type="checkbox"> 
  </th>
    <td>2</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
  </tr>
    <tr>
    <th>
     <input type="checkbox"> 
  </th>
    <td>2</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td&
					   

Simplest of all solutions:

Add the below code in CSS:

.tableClassName tbody {
  display: block;
  max-height: 200px;
  overflow-y: scroll;
}

.tableClassName thead, .tableClassName tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.tableClassName thead {
  width: calc( 100% - 1.1em );
}

1.1 em is the average width of the scroll bar, please modify this if needed.


It is simple way to use scroll bar to table body

_x000D_
_x000D_
/* It is simple way to use scroll bar to table body*/

table tbody {
  display: block;
  max-height: 300px;
  overflow-y: scroll;
}

table thead, table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
_x000D_
<table>
  <thead>
    <th>Invoice Number</th>
    <th>Purchaser</th>
    <th>Invoice Amount</th>
    <th>Invoice Date</th>
  </thead>
  <tbody>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
  </tbody>
</table>
_x000D_
_x000D_
_x000D_


Making scrolling tables is always a challenge. This is a solution where the table is scrolled both horizontally and vertically with fixed height on tbody making theader and tbody "stick" (without display: sticky). I've added a "big" table just to show. I got inspiration from G-Cyrillus to make the tbody display:block; But when it comes to width of a cell (both in header and body), it's depending on the inside content. Therefore I added content with specific width inside each cell, both in thead and minimum first row in tbody (the other rows adapt accordingly)

_x000D_
_x000D_
.go-wrapper {_x000D_
    overflow-x: auto;_x000D_
    width: 100%;_x000D_
}_x000D_
.go-wrapper table {_x000D_
    width: auto;_x000D_
}_x000D_
.go-wrapper table tbody {_x000D_
    display: block;_x000D_
    height: 220px;_x000D_
    overflow: auto;_x000D_
}_x000D_
.go-wrapper table thead {_x000D_
    display: table;_x000D_
}_x000D_
.go-wrapper table tfoot {_x000D_
    display: table;_x000D_
}_x000D_
.go-wrapper table thead tr, _x000D_
.go-wrapper table tbody tr,_x000D_
.go-wrapper table tfoot tr {_x000D_
    display: table-row;_x000D_
}_x000D_
_x000D_
.go-wrapper table th,_x000D_
.go-wrapper table td { _x000D_
    white-space: nowrap; _x000D_
}_x000D_
_x000D_
.go-wrapper .aw-50  { min-height: 1px; width: 50px; }_x000D_
.go-wrapper .aw-100 { min-height: 1px; width: 100px; }_x000D_
.go-wrapper .aw-200 { min-height: 1px; width: 200px; }_x000D_
.go-wrapper .aw-400 { min-height: 1px; width: 400px; }_x000D_
_x000D_
/***** Colors *****/_x000D_
.go-wrapper table {_x000D_
    border: 2px solid red_x000D_
}_x000D_
.go-wrapper table thead, _x000D_
.go-wrapper table tbody, _x000D_
.go-wrapper table tfoot {_x000D_
    outline: 1px solid green_x000D_
}_x000D_
.go-wrapper td {_x000D_
    outline: 1px solid blue_x000D_
}
_x000D_
<!DOCTYPE html>_x000D_
<html lang="en">_x000D_
_x000D_
<head>_x000D_
    <meta charset="UTF-8">_x000D_
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">_x000D_
    <title>Template</title>_x000D_
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">_x000D_
    <link rel="stylesheet" href="css/main.css">_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
    <div class="container">_x000D_
        <div class="row mt-5 justify-content-md-center">_x000D_
            <div class="col-8">_x000D_
                <div class="go-wrapper">_x000D_
                    <table class="table">_x000D_
                        <thead>_x000D_
                            <tr>_x000D_
                                <th><div class="aw-50" ><div class="checker"><span><input type="checkbox" class="styled"></span></div></div></th>_x000D_
                                <th><div class="aw-200">Name</div></th>_x000D_
                                <th><div class="aw-50" >Week</div></th>_x000D_
                                <th><div class="aw-100">Date</div></th>_x000D_
                                <th><div class="aw-100">Time</div></th>_x000D_
                                <th><div class="aw-200">Project</div></th>_x000D_
                                <th><div class="aw-400">Text</div></th>_x000D_
                                <th><div class="aw-200">Activity</div></th>_x000D_
                                <th><div class="aw-50" >Hours</th>_x000D_
                                <th><div class="aw-50" >Pause</div></th>_x000D_
                                <th><div class="aw-100">Status</div></th>_x000D_
                            </tr>_x000D_
                        </thead>_x000D_
                        <tbody>_x000D_
                            <tr>_x000D_
                                <td><div class="aw-50"><div class="checker"><span><input type="checkbox" class="styled"></span></div></div></td>_x000D_
                                <td><div class="aw-200">AAAAA</div></td>_x000D_
                                <td><div class="aw-50" >15</div></td>_x000D_
                                <td><div class="aw-100">07.04.2020</div></td>_x000D_
                                <td><div class="aw-100">10:00</div></td>_x000D_
                                <td><div class="aw-200">Project 1</div></td>_x000D_
                                <td><div class="aw-400">Blah blah blah</div></td>_x000D_
                                <td><div class="aw-200">Activity</div></td>_x000D_
                                <td><div class="aw-50" >2t</div></td>_x000D_
                                <td><div class="aw-50" >30min</div></td>_x000D_
                                <td><div class="aw-100">Waiting</div></td>_x000D_
                            </tr>_x000D_
                            <tr>_x000D_
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>_x000D_
                                <td>BBBBB</td>_x000D_
                                <td>15</td>_x000D_
                                <td>07.04.2020</td>_x000D_
                                <td>10:00</td>_x000D_
                                <td>Project 1</td>_x000D_
                                <td>Blah blah blah</td>_x000D_
                                <td>Activity</td>_x000D_
                                <td>2t</td>_x000D_
                                <td>30min</td>_x000D_
                                <td>Waiting</td>_x000D_
                            </tr>_x000D_
                            <tr>_x000D_
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>_x000D_
                                <td>CCCCC</td>_x000D_
                                <td>15</td>_x000D_
                                <td>07.04.2020</td>_x000D_
                                <td>10:00</td>_x000D_
                                <td>Project 1</td>_x000D_
                                <td>Blah blah blah Blah blah blah</td>_x000D_
                                <td>Activity Activity Activity</td>_x000D_
                                <td>2t</td>_x000D_
                                <td>30min</td>_x000D_
                                <td>Waiting</td>_x000D_
                            </tr>_x000D_
                            <tr>_x000D_
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>_x000D_
                                <td>DDDDD</td>_x000D_
                                <td>15</td>_x000D_
                                <td>07.04.2020</td>_x000D_
                                <td>10:00</td>_x000D_
                                <td>Project 1</td>_x000D_
                                <td>Blah blah blah</td>_x000D_
                                <td>Activity</td>_x000D_
                                <td>2t</td>_x000D_
                                <td>30min</td>_x000D_
                                <td>Waiting</td>_x000D_
                            </tr>_x000D_
                            <tr>_x000D_
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>_x000D_
                                <td>EEEEE</td>_x000D_
                                <td>15</td>_x000D_
                                <td>07.04.2020</td>_x000D_
                                <td>10:00</td>_x000D_
                                <td>Project 1</td>_x000D_
                                <td>Blah blah blah</td>_x000D_
                                <td>Activity</td>_x000D_
                                <td>2t</td>_x000D_
                                <td>30min</td>_x000D_
                                <td>Waiting</td>_x000D_
                            </tr>_x000D_
                            <tr>_x000D_
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>_x000D_
                                <td>FFFFF</td>_x000D_
                                <td>15</td>_x000D_
                                <td>07.04.2020</td>_x000D_
                                <td>10:00</td>_x000D_
                                <td>Project 1</td>_x000D_
                                <td>Blah blah blah</td>_x000D_
                                <td>Activity Activity Activity</td>_x000D_
                                <td>2t</td>_x000D_
                                <td>30min</td>_x000D_
                                <td>Waiting</td>_x000D_
                            </tr>_x000D_
                            <tr>_x000D_
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>_x000D_
                                <td>GGGGG</td>_x000D_
                                <td>15</td>_x000D_
                                <td>07.04.2020</td>_x000D_
                                <td>10:00</td>_x000D_
                                <td>Project 1</td>_x000D_
                                <td>Blah blah blah</td>_x000D_
                                <td>Activity</td>_x000D_
                                <td>2t</td>_x000D_
                                <td>30min</td>_x000D_
                                <td>Waiting</td>_x000D_
                            </tr>_x000D_
                            <tr>_x000D_
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>_x000D_
                                <td>HHHHH</td>_x000D_
                                <td>15</td>_x000D_
                                <td>07.04.2020</td>_x000D_
                                <td>10:00</td>_x000D_
                                <td>Project 1</td>_x000D_
                                <td>Blah blah blah</td>_x000D_
                                <td>Activity</td>_x000D_
                                <td>2t</td>_x000D_
                                <td>30min</td>_x000D_
                                <td>Waiting</td>_x000D_
                            </tr>_x000D_
                            <tr>_x000D_
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>_x000D_
                                <td>IIIII</td>_x000D_
                                <td>15</td>_x000D_
                                <td>07.04.2020</td>_x000D_
                                <td>10:00</td>_x000D_
                                <td>Project 1</td>_x000D_
                                <td>Blah blah blah</td>_x000D_
                                <td>Activity</td>_x000D_
                                <td>2t</td>_x000D_
                                <td>30min</td>_x000D_
                                <td>Waiting</td>_x000D_
                            </tr>_x000D_
                            <tr>_x000D_
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>_x000D_
                                <td>JJJJJ</td>_x000D_
                                <td>15</td>_x000D_
                                <td>07.04.2020</td>_x000D_
                                <td>10:00</td>_x000D_
                                <td>Project 1</td>_x000D_
                                <td>Blah blah blah</td>_x000D_
                                <td>Activity</td>_x000D_
                                <td>2t</td>_x000D_
                                <td>30min</td>_x000D_
                                <td>Waiting</td>_x000D_
                            </tr>_x000D_
                            <tr>_x000D_
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>_x000D_
                                <td>KKKKK</td>_x000D_
                                <td>15</td>_x000D_
                                <td>07.04.2020</td>_x000D_
                                <td>10:00</td>_x000D_
                                <td>Project 1</td>_x000D_
                                <td>Blah blah blah</td>_x000D_
                                <td>Activity</td>_x000D_
                                <td>2t</td>_x000D_
                                <td>30min</td>_x000D_
                                <td>Waiting</td>_x000D_
                            </tr>_x000D_
                            <tr>_x000D_
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>_x000D_
                                <td>LLLLL</td>_x000D_
                                <td>15</td>_x000D_
                                <td>07.04.2020</td>_x000D_
                                <td>10:00</td>_x000D_
                                <td>Project 1</td>_x000D_
                                <td>Blah blah blah</td>_x000D_
                                <td>Activity</td>_x000D_
                                <td>2t</td>_x000D_
                                <td>30min</td>_x000D_
                                <td>Waiting</td>_x000D_
                            </tr>_x000D_
                            <tr>_x000D_
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>_x000D_
                                <td>MMMMM</td>_x000D_
                                <td>15</td>_x000D_
                                <td>07.04.2020</td>_x000D_
                                <td>10:00</td>_x000D_
                                <td>Project 1</td>_x000D_
                                <td>Blah blah blah</td>_x000D_
                                <td>Activity</td>_x000D_
                                <td>2t</td>_x000D_
                                <td>30min</td>_x000D_
                                <td>Waiting</td>_x000D_
                            </tr>_x000D_
                            <tr>_x000D_
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>_x000D_
                                <td>NNNNN</td>_x000D_
                                <td>15</td>_x000D_
                                <td>07.04.2020</td>_x000D_
                                <td>10:00</td>_x000D_
                                <td>Project 1</td>_x000D_
                                <td>Blah blah blah</td>_x000D_
                                <td>Activity</td>_x000D_
                                <td>2t</td>_x000D_
                                <td>30min</td>_x000D_
                                <td>Waiting</td>_x000D_
                            </tr>_x000D_
                            <tr>_x000D_
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>_x000D_
                                <td>OOOOO</td>_x000D_
                                <td>15</td>_x000D_
                                <td>07.04.2020</td>_x000D_
                                <td>10:00</td>_x000D_
                                <td>Project 1</td>_x000D_
                                <td>Blah blah blah</td>_x000D_
                                <td>Activity</td>_x000D_
                                <td>2t</td>_x000D_
                                <td>30min</td>_x000D_
                                <td>Waiting</td>_x000D_
                            </tr>_x000D_
                            <tr>_x000D_
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>_x000D_
                                <td>PPPPP</td>_x000D_
                                <td>15</td>_x000D_
                                <td>07.04.2020</td>_x000D_
                                <td>10:00</td>_x000D_
                                <td>Project 1</td>_x000D_
                                <td>Blah blah blah</td>_x000D_
                                <td>Activity</td>_x000D_
                                <td>2t</td>_x000D_
                                <td>30min</td>_x000D_
                                <td>Waiting</td>_x000D_
                            </tr>_x000D_
                            <tr>_x000D_
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>_x000D_
                                <td>QQQQQ</td>_x000D_
                                <td>15</td>_x000D_
                                <td>07.04.2020</td>_x000D_
                                <td>10:00</td>_x000D_
                                <td>Project 1</td>_x000D_
                                <td>Blah blah blah</td>_x000D_
                                <td>Activity</td>_x000D_
                                <td>2t</td>_x000D_
                                <td>30min</td>_x000D_
                                <td>Waiting</td>_x000D_
                            </tr>_x000D_
                            <tr>_x000D_
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>_x000D_
                                <td>RRRRR</td>_x000D_
                                <td>15</td>_x000D_
                                <td>07.04.2020</td>_x000D_
                                <td>10:00</td>_x000D_
                                <td>Project 1</td>_x000D_
                                <td>Blah blah blah</td>_x000D_
                                <td>Activity</td>_x000D_
                                <td>2t</td>_x000D_
                                <td>30min</td>_x000D_
                                <td>Waiting</td>_x000D_
                            </tr>_x000D_
                            <tr>_x000D_
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>_x000D_
                                <td>SSSSS</td>_x000D_
                                <td>15</td>_x000D_
                                <td>07.04.2020</td>_x000D_
                                <td>10:00</td>_x000D_
                                <td>Project 1</td>_x000D_
                                <td>Blah blah blah</td>_x000D_
                                <td>Activity</td>_x000D_
                                <td>2t</td>_x000D_
                                <td>30min</td>_x000D_
                                <td>Waiting</td>_x000D_
                            </tr>_x000D_
                            <tr>_x000D_
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>_x000D_
                                <td>TTTTT</td>_x000D_
                                <td>15</td>_x000D_
                                <td>07.04.2020</td>_x000D_
                                <td>10:00</td>_x000D_
                                <td>Project 1</td>_x000D_
                                <td>Blah blah blah</td>_x000D_
                                <td>Activity</td>_x000D_
                                <td>2t</td>_x000D_
                                <td>30min</td>_x000D_
                                <td>Waiting</td>_x000D_
                            </tr>_x000D_
                            <tr>_x000D_
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>_x000D_
                                <td>UUUUU</td>_x000D_
                                <td>15</td>_x000D_
                                <td>07.04.2020</td>_x000D_
                                <td>10:00</td>_x000D_
                                <td>Project 1</td>_x000D_
                                <td>Blah blah blah</td>_x000D_
                                <td>Activity</td>_x000D_
                                <td>2t</td>_x000D_
                                <td>30min</td>_x000D_
                                <td>Waiting</td>_x000D_
                            </tr>_x000D_
                            <tr>_x000D_
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>_x000D_
                                <td>VVVVV</td>_x000D_
                                <td>15</td>_x000D_
                                <td>07.04.2020</td>_x000D_
                                <td>10:00</td>_x000D_
                                <td>Project 1</td>_x000D_
                                <td>Blah blah blah</td>_x000D_
                                <td>Activity</td>_x000D_
                                <td>2t</td>_x000D_
                                <td>30min</td>_x000D_
                                <td>Waiting</td>_x000D_
                            </tr>_x000D_
                            <tr>_x000D_
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>_x000D_
                                <td>XXXXX</td>_x000D_
                                <td>15</td>_x000D_
                                <td>07.04.2020</td>_x000D_
                                <td>10:00</td>_x000D_
                                <td>Project 1</td>_x000D_
                                <td>Blah blah blah</td>_x000D_
                                <td>Activity</td>_x000D_
                                <td>2t</td>_x000D_
                                <td>30min</td>_x000D_
                                <td>Waiting</td>_x000D_
                            </tr>_x000D_
                            <tr>_x000D_
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>_x000D_
                                <td>YYYYY</td>_x000D_
                                <td>15</td>_x000D_
                                <td>07.04.2020</td>_x000D_
                                <td>10:00</td>_x000D_
                                <td>Project 1</td>_x000D_
                                <td>Blah blah blah</td>_x000D_
                                <td>Activity</td>_x000D_
                                <td>2t</td>_x000D_
                                <td>30min</td>_x000D_
                                <td>Waiting</td>_x000D_
                            </tr>_x000D_
                            <tr>_x000D_
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>_x000D_
                                <td>ZZZZZ</td>_x000D_
                                <td>15</td>_x000D_
                                <td>07.04.2020</td>_x000D_
                                <td>10:00</td>_x000D_
                                <td>Project 1</td>_x000D_
                                <td>Blah blah blah</td>_x000D_
                                <td>Activity</td>_x000D_
                                <td>2t</td>_x000D_
                                <td>30min</td>_x000D_
                                <td>Waiting</td>_x000D_
                            </tr>_x000D_
                            <tr>_x000D_
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>_x000D_
                                <td>ÆÆÆÆÆ</td>_x000D_
                                <td>15</td>_x000D_
                                <td>07.04.2020</td>_x000D_
                                <td>10:00</td>_x000D_
                                <td>Project 1</td>_x000D_
                                <td>Blah blah blah</td>_x000D_
                                <td>Activity</td>_x000D_
                                <td>2t</td>_x000D_
                                <td>30min</td>_x000D_
                                <td>Waiting</td>_x000D_
                            </tr>_x000D_
                            <tr>_x000D_
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>_x000D_
                                <td>ØØØØØ</td>_x000D_
                                <td>15</td>_x000D_
                                <td>07.04.2020</td>_x000D_
                                <td>10:00</td>_x000D_
                                <td>Project 1</td>_x000D_
                                <td>Blah blah blah</td>_x000D_
                                <td>Activity</td>_x000D_
                                <td>2t</td>_x000D_
                                <td>30min</td>_x000D_
                                <td>Waiting</td>_x000D_
                            </tr>_x000D_
                            <tr>_x000D_
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>_x000D_
                                <td>Ã…Ã…Ã…Ã…Ã…</td>_x000D_
                                <td>15</td>_x000D_
                                <td>07.04.2020</td>_x000D_
                                <td>10:00</td>_x000D_
                                <td>Project 1</td>_x000D_
                                <td>Blah blah blah</td>_x000D_
                                <td>Activity</td>_x000D_
                                <td>2t</td>_x000D_
                                <td>30min</td>_x000D_
                                <td>Waiting</td>_x000D_
                            </tr>_x000D_
                        </tbody>_x000D_
                        <tfoot>_x000D_
                            <tr>_x000D_
                                <th><div class="aw-50" ><div class="checker"><span><input type="checkbox" class="styled"></span></div></div></th>_x000D_
                                <th><div class="aw-200">Name</div></th>_x000D_
                                <th><div class="aw-50" >Week</div></th>_x000D_
                                <th><div class="aw-100">Date</div></th>_x000D_
                                <th><div class="aw-100">Time</div></th>_x000D_
                                <th><div class="aw-200">Project</div></th>_x000D_
                                <th><div class="aw-400">Text</div></th>_x000D_
                                <th><div class="aw-200">Activity</div></th>_x000D_
                                <th><div class="aw-50" >Hours</th>_x000D_
                                <th><div class="aw-50" >Pause</div></th>_x000D_
                                <th><div class="aw-100">Status</div></th>_x000D_
                            </tr>_x000D_
                        </tfoot>_x000D_
                    </table>_x000D_
                </div>_x000D_
            </div>_
					   

I guess what you're trying to do, is to keep the header fixed and to scroll the body content. You can scroll the content into 2 directions:

  • horizontally: you won't be able to scroll the content horizontally unless you use a slider (a jQuery slider for example). I would recommend to avoid using a table in this case.
  • vertically: you won't be able to achieve that with a tbody tag, because assigning display:block or display:inline-block will break the layout of the table.

Here's a solution using divs: JSFiddle

HTML:

<div class="wrap_header">
    <div class="column">
        Name
    </div>
    <div class="column">
        Phone
    </div>
    <div class="clearfix"></div>
</div>
<div class="wrap_body">
    <div class="sliding_wrapper">
        <div class="serie">
            <div class="cell">
                AAAAAA
            </div>
            <div class="cell">
                323232
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="serie">
            <div class="cell">
                BBBBBB
            </div>
            <div class="cell">
                323232
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="serie">
            <div class="cell">
                CCCCCC
            </div>
            <div class="cell">
                3435656
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

CSS:

.wrap_header{width:204px;}
.sliding_wrapper,
.wrap_body {width:221px;}
.sliding_wrapper {overflow-y:scroll; overflow-x:none;}
.sliding_wrapper,
.wrap_body {height:45px;}
.wrap_header,
.wrap_body {overflow:hidden;}
.column {width:100px; float:left; border:1px solid red;}
.cell {width:100px; float:left; border:1px solid red;}

/**
 * @info Clearfix: clear all the floated elements
 */
.clearfix:after {
    visibility:hidden;
    display:block;
    font-size:0;
    content:" ";
    clear:both;
    height:0;
}
.clearfix {display:inline-table;}

/**
 * @hack Display the Clearfix as a block element
 * @hackfor Every browser except IE for Macintosh
 */
    /* Hides from IE-mac \*/
    * html .clearfix {height:1%;}
    .clearfix {display:block;}
    /* End hide from IE-mac */

Explanation:

You have a sliding wrapper which will contain all the data.

Note the following:

.wrap_header{width:204px;}
.sliding_wrapper,
.wrap_body {width:221px;}

There's a difference of 17px because we need to take into consideration the width of the scrollbar.


Change your second table code like below.

<table style="border: 1px solid red;width:300px;display:block;">
<thead>
    <tr>
        <td width=150>Name</td>
        <td width=150>phone</td>
    </tr>
</thead>
<tbody style='height:50px;overflow:auto;display:block;width:317px;'>
    <tr>
        <td width=150>AAAA</td>
        <td width=150>323232</td>
    </tr>
    <tr>
        <td>BBBBB</td>
        <td>323232</td>
    </tr>
    <tr>
        <td>CCCCC</td>
        <td>3435656</td>
    </tr>
</tbody>
</table>

JSFIDDLE DEMO


Webkit seems to use internally display: table-row-group for the tbody tag. There is currently a bug with setting height to it: https://github.com/w3c/csswg-drafts/issues/476

Let's hope it will be solved soon.


By default overflow does not apply to table group elements unless you give a display:block to <tbody> also you have to give a position:relative and display: block to <thead>. Check the DEMO.

.fixed {
  width:350px;
  table-layout: fixed;
  border-collapse: collapse;
}
.fixed th {
  text-decoration: underline;
}
.fixed th,
.fixed td {
  padding: 5px;
  text-align: left;
  min-width: 200px;
}


.fixed thead {
  background-color: red;
  color: #fdfdfd;
}
.fixed thead tr {
  display: block;
  position: relative;
}
.fixed tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 100px;
  overflow-y: scroll;
    overflow-x: hidden;
}

Based on this answer, here's a minimal solution if you're already using Bootstrap:

div.scrollable-table-wrapper {
  height: 500px;
  overflow: auto;

  thead tr th {
    position: sticky;
    top: 0;
  }
}
<div class="scrollable-table-wrapper">
  <table class="table">
    <thead>...</thead>
    <tbody>...</tbody>
  </table>
</div>

Tested on Bootstrap v3


In my case I wanted to have responsive table height instead of fixed height in pixels as the other answers are showing. To do that I used percentage of visible height property and overflow on div containing the table:

&__table-container {
  height: 70vh;
  overflow: scroll;
}

This way the table will expand along with the window being resized.


Another approach is to wrap your table in a scrollable element and set the header cells to stick to the top.

The advantage of this approach is that you don't have to change the display on tbody and you can leave it to the browser to calculate column width while keeping the header cell widths in line with the data cell column widths.

_x000D_
_x000D_
/* Set a fixed scrollable wrapper */_x000D_
.tableWrap {_x000D_
  height: 200px;_x000D_
  border: 2px solid black;_x000D_
  overflow: auto;_x000D_
}_x000D_
/* Set header to stick to the top of the container. */_x000D_
thead tr th {_x000D_
  position: sticky;_x000D_
  top: 0;_x000D_
}_x000D_
_x000D_
/* If we use border,_x000D_
we must use table-collapse to avoid_x000D_
a slight movement of the header row */_x000D_
table {_x000D_
 border-collapse: collapse;_x000D_
}_x000D_
_x000D_
/* Because we must set sticky on th,_x000D_
 we have to apply background styles here_x000D_
 rather than on thead */_x000D_
th {_x000D_
  padding: 16px;_x000D_
  padding-left: 15px;_x000D_
  border-left: 1px dotted rgba(200, 209, 224, 0.6);_x000D_
  border-bottom: 1px solid #e8e8e8;_x000D_
  background: #ffc491;_x000D_
  text-align: left;_x000D_
  /* With border-collapse, we must use box-shadow or psuedo elements_x000D_
  for the header borders */_x000D_
  box-shadow: 0px 0px 0 2px #e8e8e8;_x000D_
}_x000D_
_x000D_
/* Basic Demo styling */_x000D_
table {_x000D_
  width: 100%;_x000D_
  font-family: sans-serif;_x000D_
}_x000D_
table td {_x000D_
  padding: 16px;_x000D_
}_x000D_
tbody tr {_x000D_
  border-bottom: 2px solid #e8e8e8;_x000D_
}_x000D_
thead {_x000D_
  font-weight: 500;_x000D_
  color: rgba(0, 0, 0, 0.85);_x000D_
}_x000D_
tbody tr:hover {_x000D_
  background: #e6f7ff;_x000D_
}
_x000D_
<div class="tableWrap">_x000D_
  <table>_x000D_
    <thead>_x000D_
      <tr>_x000D_
        <th><span>Month</span></th>_x000D_
        <th>_x000D_
          <span>Event</span>_x000D_
        </th>_x000D_
        <th><span>Action</span></th>_x000D_
      </tr>_x000D_
    </thead>_x000D_
    <tbody>_x000D_
      <tr>_x000D_
        <td>January</td>_x000D_
        <td>AAA</td>_x000D_
        <td><span>Invite | Delete</span></td>_x000D_
      </tr>_x000D_
      <tr>_x000D_
        <td>February. An extra long string.</td>_x000D_
        <td>AAA</td>_x000D_
        <td><span>Invite | Delete</span></td>_x000D_
      </tr>_x000D_
      <tr>_x000D_
        <td>March</td>_x000D_
        <td>AAA</td>_x000D_
        <td><span>Invite | Delete</span></td>_x000D_
      </tr>_x000D_
      <tr>_x000D_
        <td>April</td>_x000D_
        <td>AAA</td>_x000D_
        <td><span>Invite | Delete</span></td>_x000D_
      </tr>_x000D_
      <tr>_x000D_
        <td>May</td>_x000D_
        <td>AAA</td>_x000D_
        <td><span>Invite | Delete</span></td>_x000D_
      </tr>_x000D_
      <tr>_x000D_
        <td>June</td>_x000D_
        <td>AAA</td>_x000D_
        <td><span>Invite | Delete</span></td>_x000D_
      </tr>_x000D_
      <tr>_x000D_
        <td>July</td>_x000D_
        <td>AAA</td>_x000D_
        <td><span>Invite | Delete</span></td>_x000D_
      </tr>_x000D_
      <tr>_x000D_
        <td>August</td>_x000D_
        <td>AAA</td>_x000D_
        <td><span>Invite | Delete</span></td>_x000D_
      </tr>_x000D_
      <tr>_x000D_
        <td>September</td>_x000D_
        <td>AAA</td>_x000D_
        <td><span>Invite | Delete</span></td>_x000D_
      </tr>_x000D_
      <tr>_x000D_
        <td>October</td>_x000D_
        <td>AAA</td>_x000D_
        <td><span>Invite | Delete</span></td>_x000D_
      </tr>_x000D_
      <tr>_x000D_
        <td>November</td>_x000D_
        <td>AAA</td>_x000D_
        <td><span>Invite | Delete</span></td>_x000D_
      </tr>_x000D_
      <tr>_x000D_
        <td>December</td>_x000D_
        <td>AAA</td>_x000D_
        <td><span>Invite | Delete</span></td>_x000D_
      </tr>_x000D_
    </tbody>_x000D_
  </table>_x000D_
</div>
_x000D_
_x000D_
_x000D_


HTML:

<table id="uniquetable">
    <thead>
      <tr>
        <th> {{ field[0].key }} </th>
        <th> {{ field[1].key }} </th>
        <th> {{ field[2].key }} </th>
        <th> {{ field[3].key }} </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="obj in objects" v-bind:key="obj.id">
        <td> {{ obj.id }} </td>
        <td> {{ obj.name }} </td>
        <td> {{ obj.age }} </td>
        <td> {{ obj.gender }} </td>
      </tr>
    </tbody>
</table>

CSS:

#uniquetable thead{
    display:block;
    width: 100%;
}
#uniquetable tbody{
    display:block;
    width: 100%;
    height: 100px;
    overflow-y:overlay;
    overflow-x:hidden;
}
#uniquetable tbody tr,#uniquetable thead tr{
    width: 100%;
    display:table;
}
#uniquetable tbody tr td, #uniquetable thead tr th{
   display:table-cell;
   width:20% !important;
   overflow:hidden;
}

this will work as well:

#uniquetable tbody {
    width:inherit !important;
    display:block;
    max-height: 400px;
    overflow-y:overlay;
  }
  #uniquetable thead {
    width:inherit !important;
    display:block;
  }
  #uniquetable tbody tr, #uniquetable thead tr {
    display:inline-flex;
    width:100%;
  }
  #uniquetable tbody tr td,  #uniquetable thead tr th {
    display:block;
    width:20%;
    border-top:none;
    text-overflow: ellipsis;
    overflow: hidden;
    max-height:400px;
  }