Make the Bootstrap Table Scroll-Able Vertically and Horizontally With Fixed Header

Fixed table header with horizontal AND vertical scrolling body

You are cloning the table for fix header, better you can direct fix the header of original table which will results the same.

Element with position:fixed changes the width with respect to viewport, which results width gets change on scrolling as you can check here https://jsfiddle.net/chourasiapawankumar/vg7q3tyc/19

Approach:1

instead of position:fixed use relative in th and it is working with your parent div which has min-height:100px.

https://jsfiddle.net/chourasiapawankumar/krw0qpbL/62/

Approach:2

You can see both horizontal and vertical scroll bar at a time on removing min-height of parent div which I have commented in the below fiddle.

https://jsfiddle.net/chourasiapawankumar/vg7q3tyc/33/

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

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>

Bootstrap 4 table with the scrollable body and header fixed

Try using flex, it should be compatible with table-responsive:

table {
    display: flex;
    flex-flow: column;
    width: 100%;
}

thead {
    flex: 0 0 auto;
}

tbody {
    flex: 1 1 auto;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
}

tr {
    width: 100%;
    display: table;
    table-layout: fixed;
}

Hope this will help

Bootstrap 4 Table Responsive, Horizontal and Vertical Scroll

I fixed it this like this: First I edited the css, then I removed the thead part, and added some content in the body like this:

body {
  --table-width: 100%; /* Or any value, this will change dinamically */
}
tbody {
  display:block;
  max-height:500px;
  overflow-y:auto;
}
thead, tbody tr {
  display:table;
  width: var(--table-width);
  table-layout:fixed;
}

I also left the .table-responsive div:

<div class="table-responsive">
    <table class="table table-striped table-bordered" style="margin-bottom: 0">
    ...
    </table>
</div>

Then I calculated --table-width depending on the number of columns and length of the longest column name. I did this with Angular, in my component .ts:

calculateTableWidth() {
  // Get the table container width:
  const pageWidth = document.getElementById('tableCard').offsetWidth;
  // Get the longest column name
  const longest = this.tableColumns.sort(function (a, b) { return b.length - a.length; })[0];
  // Calculate table width
  let tableWidth = this.tableColumns.length * longest.length * 14;
  // If the width is less than the pageWidth
  if (tableWidth < (pageWidth - 10)) {
    // We set tableWidth to pageWidth - scrollbarWidth (10 in my project)
    tableWidth = pageWidth - 10;
  }
  // Then we update the --table-width variable:
  document.querySelector('body').style.cssText = '--table-width: ' + tableWidth + 'px';
}

I need to run calculateTableWidth() at the beginning in ngOnInit() (or when I have defined the tableColumns array) and then when I resize the window:

ngOnInit() {
  this.tableColumns = this.myAppService.getTableColumnsNames();
  this.calculateTableWidth();
}

@HostListener('window:resize', ['$event'])
onResize(event: any) {
  this.calculateTableWidth();
}

And that's how I fixed this. Now I have a good looking table, with vertical and horizontal scrolling.

table with sticky header and horizontal scroll

As per the MDN documentation:

a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling ancestor.

There's an active GitHub issue discussing this on the W3C repo, which has been running since 2017. There have been various workarounds suggested, but they all seem to rely on adding a fixed height to the table / table container, or using Javascript as in this answer.

At least for the moment, this is not something that's supported natively.