How to make Bootstrap "table-bordered" Fixed header and Scroll body?

Question

I'm trying to make the table header fixed and scroll the body and I have used the below CSS. But this will break table layout. (width of header columns are different from width of body columns). How Can I avoid this problem ?

#tblLocations thead, tbody {
    display: block;
}

#tblLocations tbody{   
   max-height: 290px;
   overflow-y:scroll;
}

Answer 1

Try this as an example: Fixed table and Scrollable body

.tableFixHead {
  overflow-y: auto;
  height: 200px;
}

.tableFixHead table {
  border-collapse: collapse;
  width: 100%;
}

.tableFixHead th,
.tableFixHead td {
  padding: 8px 16px;
}

.tableFixHead th {
  position: sticky;
  top: 0;
  background: #eee;
}

    <div class="tableFixHead">
      <table>
        <thead>
          <tr>
              <th>Last name</th>
              <th>Points</th>
              <th>Content</th>
            </tr>
        </thead>
        <tbody>
            <tr>
              <td>Smith</td>
              <td>50</td>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
            </tr>
            <tr>
           
              <td>Jackson</td>
              <td>94</td>
              <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</td>
            </tr>
            
             <tr>
              <td>Smith</td>
              <td>50</td>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
            </tr>
            <tr>
             
              <td>Jackson</td>
              <td>94</td>
              <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</td>
            </tr>
            <tr>
            
              <td>Smith</td>
              <td>50</td>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
            </tr>
            <tr>
           
              <td>Jackson</td>
              <td>94</td>
              <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</td>
            </tr>
            <tr>
        </tbody>
      </table>
    </div>