[html] Table fixed header and scrollable body

I am trying to make a table with fixed header and a scrollable content using the bootstrap 3 table. Unfortunately the solutions I have found does not work with bootstrap or mess up the style.

Here there is a simple bootstrap table, but for some reason to me unknown the height of the tbody is not 10px.

height: 10px !important; overflow: scroll;

Example:

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">_x000D_
_x000D_
<table class="table table-striped">_x000D_
    <thead>_x000D_
    <tr>_x000D_
        <th>Make</th>_x000D_
        <th>Model</th>_x000D_
        <th>Color</th>_x000D_
        <th>Year</th>_x000D_
    </tr>_x000D_
    </thead>_x000D_
    <tbody style="height: 10px !important; overflow: scroll; ">_x000D_
    <tr>_x000D_
        <td class="filterable-cell">111 Ford</td>_x000D_
        <td class="filterable-cell">Escort</td>_x000D_
        <td class="filterable-cell">Blue</td>_x000D_
        <td class="filterable-cell">2000</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td class="filterable-cell">Ford</td>_x000D_
        <td class="filterable-cell">Escort</td>_x000D_
        <td class="filterable-cell">Blue</td>_x000D_
        <td class="filterable-cell">2000</td>_x000D_
    </tr>_x000D_
            <tr>_x000D_
        <td class="filterable-cell">Ford</td>_x000D_
        <td class="filterable-cell">Escort</td>_x000D_
        <td class="filterable-cell">Blue</td>_x000D_
        <td class="filterable-cell">2000</td>_x000D_
    </tr>_x000D_
     <tr>_x000D_
        <td class="filterable-cell">Ford</td>_x000D_
        <td class="filterable-cell">Escort</td>_x000D_
        <td class="filterable-cell">Blue</td>_x000D_
        <td class="filterable-cell">2000</td>_x000D_
    </tr>_x000D_
    </tbody>_x000D_
    _x000D_
</table>

Multiple scrollable table support in a single window.

Pure CSS & No fixed or sticky.

I am searching fixed table header with auto "td" and "th" width for years. Finally i coded something, it's work well for me but i am not sure is it work well for everyone.

Problem 1: We can't set table or tbody height while have tons of "tr" it's because of default table properties.

Solution: Set table a display property.

Problem 2: When we set a display property, the width of "td" elements can't be equal width of "th" elements. And it is hard to fill elements properly in full width table like 100%.

Solution: CSS "flex" is very good solution for width and fill set-ups, so we will build our tbody and thead elements with CSS "flex".

.ea_table {_x000D_
  border: 1px solid #ddd;_x000D_
  display: block;_x000D_
  background: #fff;_x000D_
  overflow-y: hidden;_x000D_
  box-sizing: border-box;_x000D_
  float: left;_x000D_
  height:auto;_x000D_
  width: 100%;_x000D_
}_x000D_
_x000D_
.ea_table tbody, thead {_x000D_
  flex-direction: column;_x000D_
  display: flex;_x000D_
}_x000D_
_x000D_
.ea_table tbody {_x000D_
  height: 300px;_x000D_
  overflow: auto;_x000D_
}_x000D_
_x000D_
.ea_table thead {_x000D_
  border-bottom: 1px solid #ddd;_x000D_
}_x000D_
_x000D_
.ea_table tr {_x000D_
  display: flex;_x000D_
}_x000D_
_x000D_
_x000D_
.ea_table tbody tr:nth-child(2n+1) {_x000D_
  background: #f8f8f8;_x000D_
  }_x000D_
_x000D_
.ea_table td, .ea_table th {_x000D_
  text-align: left;_x000D_
  font-size: 0.75rem;_x000D_
  padding: 1.5rem;_x000D_
  flex: 1;_x000D_
}

<table class="ea_table">_x000D_
    <thead>_x000D_
      <tr>_x000D_
        <th>Something Long</th>_x000D_
        <th>Something </th>_x000D_
        <th>Something Very Long</th>_x000D_
        <th>Something Long</th>_x000D_
        <th>Some</th>_x000D_
      </tr>_x000D_
    </thead>_x000D_
    <tbody>_x000D_
      <tr>_x000D_
        <td> Lorem Ipsum Dolar Sit Amet</td>_x000D_
        <td> Lorem </td>_x000D_
        <td> Lorem Ipsum </td>_x000D_
        <td> Lorem </td>_x000D_
        <td> Lorem Ipsum Dolar </td>_x000D_
      </tr>_x000D_
      <tr>_x000D_
        <td> Lorem </td>_x000D_
        <td> Lorem Ipsum Dolar Sit Amet</td>_x000D_
        <td> Lorem </td>_x000D_
        <td> Lorem Ipsum </td>_x000D_
        <td> Lorem Ipsum Dolar </td>_x000D_
      </tr>_x000D_
      <tr>_x000D_
        <td> Lorem Ipsum Dolar Sit Amet</td>_x000D_
        <td> Lorem </td>_x000D_
        <td> Lorem Ipsum </td>_x000D_
        <td> Lorem </td>_x000D_
        <td> Lorem Ipsum Dolar </td>_x000D_
      </tr>_x000D_
      <tr>_x000D_
        <td> Lorem Ipsum Dolar Sit Amet</td>_x000D_
        <td> Lorem </td>_x000D_
        <td> Lorem Ipsum </td>_x000D_
        <td> Lorem </td>_x000D_
        <td> Lorem Ipsum Dolar </td>_x000D_
      </tr>_x000D_
      <tr>_x000D_
        <td> Lorem Ipsum Dolar Sit Amet</td>_x000D_
        <td> Lorem </td>_x000D_
        <td> Lorem Ipsum </td>_x000D_
        <td> Lorem </td>_x000D_
        <td> Lorem Ipsum Dolar </td>_x000D_
      </tr>_x000D_
      <tr>_x000D_
        <td> Lorem Ipsum Dolar Sit Amet</td>_x000D_
        <td> Lorem </td>_x000D_
        <td> Lorem Ipsum </td>_x000D_
        <td> Lorem </td>_x000D_
        <td> Lorem Ipsum Dolar </td>_x000D_
      </tr>_x000D_
      <tr>_x000D_
        <td> Lorem Ipsum Dolar Sit Amet</td>_x000D_
        <td> Lorem </td>_x000D_
        <td> Lorem Ipsum </td>_x000D_
        <td> Lorem </td>_x000D_
        <td> Lorem Ipsum Dolar </td>_x000D_
      </tr>_x000D_
      <tr>_x000D_
        <td> Lorem Ipsum Dolar Sit Amet</td>_x000D_
        <td> Lorem </td>_x000D_
        <td> Lorem Ipsum </td>_x000D_
        <td> Lorem </td>_x000D_
        <td> Lorem Ipsum Dolar </td>_x000D_
      </tr>_x000D_
_x000D_
    </tbody>_x000D_
_x000D_
  </table>

jsfiddle

Update

For newer and still maintained library try jquery.floatThead (as mentioned by Bob Jordan in the comment) instead.

Old Answer

This is a very old answer, the library mentioned below no longer maintained.

I am using StickyTableHeaders on GitHub and it works like charm!

I had to add this css to make the header not transparent though.

table#stickyHeader thead {
  border-top: none;
  border-bottom: none;
  background-color: #FFF;
}

Used this link, stackoverflow.com/a/17380697/1725764, by Hashem Qolami at the original posts' comments and used display:inline-blocks instead of floats. Fixes borders if the table has the class 'table-bordered' also.

table.scroll {
  width: 100%;  
  &.table-bordered {
    td, th {
      border-top: 0;
      border-right: 0;
    }    
    th {
      border-bottom-width: 1px;
    }
    td:first-child,
    th:first-child {
      border-right: 0;
      border-left: 0;
    }
  }
  tbody {
    height: 200px;
    overflow-y: auto;
    overflow-x: hidden;  
  }
  tbody, thead {
    display: block;
  }
  tr {
    width: 100%;
    display: block;
  }
  th, td {
    display: inline-block;

  }
  td {
    height: 46px; //depends on your site
  }
}

Then just add the widths of the td and th

table.table-prep {
  tr > td.type,
  tr > th.type{
    width: 10%;
  }
  tr > td.name,
  tr > th.name,
  tr > td.notes,
  tr > th.notes,
  tr > td.quantity,
  tr > th.quantity{
    width: 30%;
  }
}

Don't need the wrap it in a div...

CSS:

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

table{
 height:300px;              // <-- Select the height of the table
 display: -moz-groupbox;    // Firefox Bad Effect
}
tbody{
  overflow-y: scroll;      
  height: 200px;            //  <-- Select the height of the body
  width: 100%;
  position: absolute;
}

Bootply : http://www.bootply.com/AgI8LpDugl

For tables that are full height (the page scrolls, not the table)

Note: I move the whole <thead>...</thead> beause In my case I had two rows (Title and filters)

With JS (jQuery)

$( function() {

            let marginTop = 0; // Add margin if the page has a top nav-bar
            let $thead = $('.table-fixed-head').find('thead');
            let offset = $thead.first().offset().top - marginTop;
            let lastPos = 0;

            $(window).on('scroll', function () {

                if ( window.scrollY > offset )
                {
                    if ( lastPos === 0 )
                    {
                        // Add a class for styling
                        $thead.addClass('floating-header');
                    }

                    lastPos = window.scrollY - offset;
                    $thead.css('transform', 'translateY(' + ( lastPos ) + 'px)');
                }
                else if ( lastPos !== 0 )
                {
                    lastPos = 0;
                    $thead.removeClass('floating-header');
                    $thead.css('transform', 'translateY(' + 0 + 'px)');
                }
            });
});

CSS (Just for styling)

 thead.floating-header>tr>th {
       background-color: #efefef;
 }

thead.floating-header>tr:last-child>th {
       border-bottom: 1px solid #aaa;
}

You should try with "display:block;" to tbody, because now it's inline-block and in order to set height, the element should be "block"

I had a lot of trouble getting the stickytableheaders library to work. Doing a bit more searching, I found floatThead is an actively maintained alternative with recent updates and better documentation.

In my eyes, one of the best plugins for jQuery is DataTables.

It also has an extension for fixed header, and it is very easily implemented.

Taken from their site:

HTML:

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
        </tr>
  </tbody>
</table>

JavaScript:

$(document).ready(function() {
    var table = $('#example').DataTable();

    new $.fn.dataTable.FixedHeader( table );
} );

But the simplest you can have for just making a scrollable <tbody> is:

//configure table with fixed header and scrolling rows
$('#example').DataTable({
    scrollY: 400,
    scrollCollapse: true,
    paging: false,
    searching: false,
    ordering: false,
    info: false
});

Fixed table head - CSS-only

Simply position: sticky; top: 0; your th elements. (Chrome, FF, Edge)

.tableFixHead          { overflow-y: auto; height: 100px; }_x000D_
.tableFixHead thead th { position: sticky; top: 0; }_x000D_
_x000D_
/* Just common table stuff. Really. */_x000D_
table  { border-collapse: collapse; width: 100%; }_x000D_
th, td { padding: 8px 16px; }_x000D_
th     { background:#eee; }

<div class="tableFixHead">_x000D_
  <table>_x000D_
    <thead>_x000D_
      <tr><th>TH 1</th><th>TH 2</th></tr>_x000D_
    </thead>_x000D_
    <tbody>_x000D_
      <tr><td>A1</td><td>A2</td></tr>_x000D_
      <tr><td>B1</td><td>B2</td></tr>_x000D_
      <tr><td>C1</td><td>C2</td></tr>_x000D_
      <tr><td>D1</td><td>D2</td></tr>_x000D_
      <tr><td>E1</td><td>E2</td></tr>_x000D_
    </tbody>_x000D_
  </table>_x000D_
</div>

TH borders problem fix

Since border cannot be painted properly on a translated TH element, to recreate and render "borders" use the box-shadow property:

/* Borders (if you need them) */
.tableFixHead,
.tableFixHead td {
  box-shadow: inset 1px -1px #000;
}
.tableFixHead th {
  box-shadow: inset 1px 1px #000, 0 1px #000;
}

.tableFixHead          { overflow-y: auto; height: 100px; }_x000D_
.tableFixHead thead th { position: sticky; top: 0; }_x000D_
_x000D_
/* Just common table stuff. Really. */_x000D_
table  { border-collapse: collapse; width: 100%; }_x000D_
th, td { padding: 8px 16px; }_x000D_
th     { background:#eee; }_x000D_
_x000D_
/* Borders (if you need them) */_x000D_
.tableFixHead,_x000D_
.tableFixHead td {_x000D_
  box-shadow: inset 1px -1px #000;_x000D_
}_x000D_
.tableFixHead th {_x000D_
  box-shadow: inset 1px 1px #000, 0 1px #000;_x000D_
}

<div class="tableFixHead">_x000D_
  <table>_x000D_
    <thead>_x000D_
      <tr><th>TH 1</th><th>TH 2</th></tr>_x000D_
    </thead>_x000D_
    <tbody>_x000D_
      <tr><td>A1</td><td>A2</td></tr>_x000D_
      <tr><td>B1</td><td>B2</td></tr>_x000D_
      <tr><td>C1</td><td>C2</td></tr>_x000D_
      <tr><td>D1</td><td>D2</td></tr>_x000D_
      <tr><td>E1</td><td>E2</td></tr>_x000D_
    </tbody>_x000D_
  </table>_x000D_
</div>

Fixed table head - using JS. (IE)

You can use a bit of JS and translateY the th elements

jQuery example

var $th = $('.tableFixHead').find('thead th')_x000D_
$('.tableFixHead').on('scroll', function() {_x000D_
  $th.css('transform', 'translateY('+ this.scrollTop +'px)');_x000D_
});

.tableFixHead { overflow-y: auto; height: 100px; }_x000D_
_x000D_
/* Just common table stuff. */_x000D_
table  { border-collapse: collapse; width: 100%; }_x000D_
th, td { padding: 8px 16px; }_x000D_
th     { background:#eee; }

<div class="tableFixHead">_x000D_
  <table>_x000D_
    <thead>_x000D_
      <tr><th>TH 1</th><th>TH 2</th></tr>_x000D_
    </thead>_x000D_
    <tbody>_x000D_
      <tr><td>A1</td><td>A2</td></tr>_x000D_
      <tr><td>B1</td><td>B2</td></tr>_x000D_
      <tr><td>C1</td><td>C2</td></tr>_x000D_
      <tr><td>D1</td><td>D2</td></tr>_x000D_
      <tr><td>E1</td><td>E2</td></tr>_x000D_
    </tbody>_x000D_
  </table>_x000D_
</div>_x000D_
_x000D_
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

Or plain ES6 if you prefer (no jQuery required):

// Fix table head
function tableFixHead (e) {
    const el = e.target,
          sT = el.scrollTop;
    el.querySelectorAll("thead th").forEach(th => 
      th.style.transform = `translateY(${sT}px)`
    );
}
document.querySelectorAll(".tableFixHead").forEach(el => 
    el.addEventListener("scroll", tableFixHead)
);

Cleaner Solution (CSS Only)

.table-fixed tbody {
    display:block;
    height:85vh;
    overflow:auto;
}
.table-fixed thead, .table-fixed tbody tr {
    display:table;
    width:100%;
}


<table class="table table-striped table-fixed">
    <thead>
        <tr align="center">
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content 1</td>
            <td>Content 1</td>
            <td>Content 1</td>
            <td>Content 1</td>
        </tr>
        <tr>
            <td>Longer Content 1</td>
            <td>Longer Content 1</td>
            <td>Longer Content 1</td>
            <td>Longer Content 1</td>
        </tr>
    </tbody
</table

It is easier with css

table tbody { display:block; max-height:450px; overflow-y:scroll; }
table thead, table tbody tr { display:table; width:100%; table-layout:fixed; }

Likely you'll get multiple tables on one page, therefore you need CSS classes. Please find a modified @giulio's solution for that.

Just declare it in table:

<table class="table table-striped header-fixed"></table>

CSS

.header-fixed {
    width: 100% 
}

.header-fixed > thead,
.header-fixed > tbody,
.header-fixed > thead > tr,
.header-fixed > tbody > tr,
.header-fixed > thead > tr > th,
.header-fixed > tbody > tr > td {
    display: block;
}

.header-fixed > tbody > tr:after,
.header-fixed > thead > tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

.header-fixed > tbody {
    overflow-y: auto;
    height: 150px;
}

.header-fixed > tbody > tr > td,
.header-fixed > thead > tr > th {
    width: 20%;
    float: left;
}

Be aware that current implementation suits five columns only. If you need a different number, change the width parameter from 20% to *100% / number_of_columns*.

I used the floatThead jQuery plugin (https://mkoryak.github.io/floatThead/#intro)

docs say it works with Bootstrap 3 tables and I can say it also works with Bootstrap 4 tables with or without the table-responsive helper.

Using the plugin is as simple as this:

HTML (vanilla bootstrap table markup)

<div class="table-responsive">
   <table id="myTable" class="table table-striped">
        <thead>...</thead>
        <tbody>...</tbody>
   </table>
</div>

Plugin Initialization:

$(document).ready(function() {
    var tbl=$('#myTable');
    tbl.floatThead({
        responsiveContainer: function(tbl) {
            return tbl.closest('.table-responsive');
        }
    });
});

Full disclaimer: I am not associated with the plugin in any way. I happened to find it after hours of trying lots of other solutions posted here and elsewhere.

First add some markup for a bootstrap table. Here I created a striped table but also have added a custom table class .table-scroll which adds vertical scroll bar to the table and makes the table header fixed while scrolling down.

<div class="col-xs-8 col-xs-offset-2 well">
    <table class="table table-scroll table-striped">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>County</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Andrew</td>
                <td>Jackson</td>
                <td>Washington</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Thomas</td>
                <td>Marion</td>
                <td>Jackson</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Benjamin</td>
                <td>Warren</td>
                <td>Lincoln</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Grant</td>
                <td>Wayne</td>
                <td>Union</td>
            </tr>
            <tr>
                <td>5</td>
                <td>John</td>
                <td>Adams</td>
                <td>Marshall</td>
            </tr>
            <tr>
                <td>6</td>
                <td>Morgan</td>
                <td>Lee</td>
                <td>Lake</td>
            </tr>
            <tr>
                <td>7</td>
                <td>John</td>
                <td>Henry</td>
                <td>Brown</td>
            </tr>
            <tr>
                <td>8</td>
                <td>William</td>
                <td>Jacob</td>
                <td>Orange</td>
            </tr>
            <tr>
                <td>9</td>
                <td>Kelly</td>
                <td>Davidson</td>
                <td>Taylor</td>
            </tr>
            <tr>
                <td>10</td>
                <td>Colleen</td>
                <td>Hurst</td>
                <td>Randolph</td>
            </tr>
            <tr>
                <td>11</td>
                <td>Rhona</td>
                <td>Herrod</td>
                <td>Cumberland</td>
            </tr>
            <tr>
                <td>12</td>
                <td>Jane</td>
                <td>Paul</td>
                <td>Marshall</td>
            </tr>
            <tr>
                <td>13</td>
                <td>Ashton</td>
                <td>Fox</td>
                <td>Calhoun</td>
            </tr>
            <tr>
                <td>14</td>
                <td>Garrett</td>
                <td>John</td>
                <td>Madison</td>
            </tr>
            <tr>
                <td>15</td>
                <td>Fredie</td>
                <td>Winters</td>
                <td>Washington</td>
            </tr>
        </tbody>
    </table>
</div>

css

.table-scroll tbody {
    position: absolute;
    overflow-y: scroll;
    height: 250px;
}

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

.table-scroll thead > tr > th {
    border: none;
}

table {_x000D_
    overflow-y: auto;_x000D_
    height: 50vh;     /* !!!  HEIGHT MUST BE IN [ vh ] !!! */_x000D_
}_x000D_
_x000D_
thead th {_x000D_
    position: sticky;_x000D_
    top: 0;_x000D_
}

   <table>_x000D_
      <thead>_x000D_
        <tr><th>TH 1</th><th>TH 2</th></tr>_x000D_
      </thead>_x000D_
      <tbody>_x000D_
        <tr><td>A1</td><td>A2</td></tr>_x000D_
        <tr><td>B1</td><td>B2</td></tr>_x000D_
        <tr><td>C1</td><td>C2</td></tr>_x000D_
        <tr><td>D1</td><td>D2</td></tr>_x000D_
        <tr><td>E1</td><td>E2</td></tr>_x000D_
        <tr><td>F1</td><td>F2</td></tr>_x000D_
        <tr><td>G1</td><td>G2</td></tr>_x000D_
        <tr><td>H1</td><td>H2</td></tr>_x000D_
        <tr><td>I1</td><td>I2</td></tr>_x000D_
        <tr><td>J1</td><td>J2</td></tr>_x000D_
        <tr><td>K1</td><td>K2</td></tr>_x000D_
        <tr><td>L1</td><td>L2</td></tr>_x000D_
        <tr><td>M1</td><td>M2</td></tr>_x000D_
        <tr><td>N1</td><td>N2</td></tr>_x000D_
        <tr><td>O1</td><td>O2</td></tr>_x000D_
        <tr><td>P1</td><td>P2</td></tr>_x000D_
        <tr><td>Q1</td><td>Q2</td></tr>_x000D_
        <tr><td>R1</td><td>R2</td></tr>_x000D_
        <tr><td>S1</td><td>S2</td></tr>_x000D_
        <tr><td>T1</td><td>T2</td></tr>_x000D_
        <tr><td>U1</td><td>U2</td></tr>_x000D_
        <tr><td>V1</td><td>V2</td></tr>_x000D_
        <tr><td>W1</td><td>W2</td></tr>_x000D_
        <tr><td>X1</td><td>X2</td></tr>_x000D_
        <tr><td>Y1</td><td>Y2</td></tr>_x000D_
        <tr><td>Z1</td><td>Z2</td></tr>_x000D_
      </tbody>_x000D_
    </table>

You don't need js. Important is to set table height in [vh]

I made some kinda working CSS only solution by using position: sticky. Should work on evergreen browsers. Try to resize browser. Still have some layout issue in FF, will fix it later, but at least table headers handle vertical and horizontal scrolling. Codepen Example

You can place two div where 1st div (Header) will have transparent scroll bar and 2nd div will be have data with visible/auto scroll bar. Sample has angular code snippet for looping through the data.

Below code worked for me -

<div id="transparentScrollbarDiv" class="container-fluid" style="overflow-y: scroll;">
    <div class="row">
        <div class="col-lg-3 col-xs-3"><strong>{{col1}}</strong></div>
        <div class="col-lg-6 col-xs-6"><strong>{{col2}}</strong></div>
        <div class="col-lg-3 col-xs-3"><strong>{{col3}}</strong></div>
    </div>
</div>
<div class="container-fluid" style="height: 150px; overflow-y: auto">
    <div>
        <div class="row" ng-repeat="row in rows">
            <div class="col-lg-3 col-xs-3">{{row.col1}}</div>
            <div class="col-lg-6 col-xs-6">{{row.col2}}</div>
            <div class="col-lg-3 col-xs-3">{{row.col3}}</div>
        </div>
    </div>
</div>

Additional style to hide header scroll bar -

<style>
        #transparentScrollbarDiv::-webkit-scrollbar {
            width: inherit;
        }

        /* this targets the default scrollbar (compulsory) */

        #transparentScrollbarDiv::-webkit-scrollbar-track {
            background-color: transparent;
        }

        /* the new scrollbar will have a flat appearance with the set background color */

        #transparentScrollbarDiv::-webkit-scrollbar-thumb {
            background-color: transparent;
        }

        /* this will style the thumb, ignoring the track */

        #transparentScrollbarDiv::-webkit-scrollbar-button {
            background-color: transparent;
        }

        /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

        #transparentScrollbarDiv::-webkit-scrollbar-corner {
            background-color: transparent;
        }

        /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
    </style>

An easy way without fixed width:

.myTable tbody{
  display:block;
  overflow:auto;
  height:200px;
  width:100%;
}
.myTable thead tr{
  display:block;
}

Source

Now, on onLoad, to adjust th widths, just add this jquery script:

$.each($('.myTable tbody tr:nth(0) td'), function(k,v) {
    $('.myTable thead th:nth('+k+')').css('width', $(v).css('width'));
});

Here is my copen pen on how to make fixed table header with scrollable rows and columns. The columns are also been fixed width, http://codepen.io/abhilashn/pen/GraJyp

<!-- Listing table -->
        <div class="row">
            <div class="col-sm-12">
                <div class="cust-table-cont">
                <div class="table-responsive">
                  <table border="0" class="table cust-table"> 
                    <thead>
                        <tr style="">
                          <th style="width:80px;">#</th> 
                          <th style="width:150px;" class="text-center"><li class="fa fa-gear"></li></th>  
                          <th style="width:250px;">Title</th>  
                          <th style="width:200px;">Company</th> 
                          <th style="width:100px;">Priority</th> 
                          <th style="width:120px;">Type</th>     
                          <th style="width:150px;">Assigned to</th> 
                          <th style="width:120px;">Status</th> 
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <th style="width:80px;">1</th>
                          <td style="width:150px;" class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td style="width:250px;">Lorem ipsum dolor sit</td>
                          <td style="width:200px;">lorem ispusm</td>
                          <td style="width:100px;">high</td>
                          <td style="width:120px;">lorem ipsum</td>
                          <td style="width:150px;">lorem ipsum</td>
                          <td style="width:120px;">lorem ipsum</td>
                        </tr>

                        <tr>
                          <th scope="row">2</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">3</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">4</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">5</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">6</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">7</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">8</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">9</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">10</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">11</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">12</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                    </tbody>
                  </table>
                </div>
                </div> <!-- End of cust-table-cont block -->
            </div>
        </div> <!-- ENd of row -->

.cust-table-cont { width:100%; overflow-x:auto; } _x000D_
.cust-table-cont .table-responsive { width:1190px;  }_x000D_
.cust-table { table-layout:fixed;  } _x000D_
.cust-table thead, .cust-table tbody { _x000D_
display: block;_x000D_
}_x000D_
.cust-table tbody { max-height:620px; overflow-y:auto; } 

Now that “all” browsers support ES6, I’ve incorporated the various suggestions above into a JavaScript class that takes a table as an argument and makes the body scrollable. It lets the browser’s layout engine determine header and body cell widths, and then makes the column widths match each other.

The height of a table can be set explicitly, or made to fill the remaining part of the browser window, and provides callbacks for events such as viewport resizing and/or details elements opening or closing.

Multi-row header support is available, and is especially effective if the table uses the id/headers attributes for accessibility as specified in the WCAC Guidelines, which is not as onerous a requirement as it might seem.

The code does not depend on any libraries, but plays nicely with them if they are being used. (Tested on pages that use JQuery).

The code and sample usage are available on Github.

<style>

thead, tbody
{
    display: block;
}

tbody 
{
   overflow: auto;
   height: 100px;
}

th,td
{
    width: 120px;
}

</style>

<table class="table table-bordered table-striped">
    <thead style="background-color:lightgreen">
        <tr>
            <th>Id</th><th>Name</th><th>Roll</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
    </tbody>
</table>

By far the best solution I've seen that is CSS only, with good cross browser support, and no alignment issues is this solution from codingrabbithole

table {
  width: 100%;
}
thead, tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
tbody {
  display: block;
  overflow-y: auto;
  table-layout: fixed;
  max-height: 200px;
}

Late to the party (Story of my life), but since this is the first result on google, and none of the above got me working, here's my code

/*Set a min width where your table start to look like crap*/
table { min-width: 600px; }

/*The next 3 sections make the magic happen*/
thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

tbody {
    display: block;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: scroll;
}

td {
    overflow: hidden;
    text-overflow: ellipsis;
}

/*Use the following to make sure cols align correctly*/
table, tr, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}


/*Set your columns to where you want them to be, skip the one that you can have resize to any width*/
    th:nth-child(1), td:nth-child(1) {
    width: 85px;
}
th:nth-child(2), td:nth-child(2) {
    width: 150px;
}
th:nth-child(4), td:nth-child(4) {
    width: 125px;
}
th:nth-child(5) {
    width: 102px;
}
td:nth-child(5) {
    width: 85px;
}

For whatever it's worth now: I did post a solution to a sister-thread Table scroll with HTML and CSS which

• takes two tables (one for only header, one for all - layouted by the browser)
• after layouting, adjust the upper (header-only) table to the widths of the lower one
• hide (visibility, not display) the header of the lower table and make the lower table scrollable w/in a div

The solution is agnostic to any styles / frameworks used - so maybe it's useful here as well...

A long description is in Table scroll with HTML and CSS / the code is also in this pen: https://codepen.io/sebredhh/pen/QmJvKy

put the table inside the div like this to make scrollable table vertically. change overflow-yto overflow-x to make table scrollable horizontally. just overflow to make table scrollable both horizontal and vertical.

<div style="overflow-y: scroll;"> 
    <table>
    ...
    </table>
</div>

The latest addition position:'sticky' would be the simplest solution here

.outer{_x000D_
    overflow-y: auto;_x000D_
    height:100px;_x000D_
    }_x000D_
_x000D_
.outer table{_x000D_
    width: 100%;_x000D_
    table-layout: fixed; _x000D_
    border : 1px solid black;_x000D_
    border-spacing: 1px;_x000D_
}_x000D_
_x000D_
.outer table th {_x000D_
        text-align: left;_x000D_
        top:0;_x000D_
        position: sticky;_x000D_
        background-color: white;  _x000D_
}

 <div class = "outer">_x000D_
 <table>_x000D_
             <tr >_x000D_
              <th>col1</th>_x000D_
              <th>col2</th>_x000D_
              <th>col3</th>_x000D_
              <th>col4</th>_x000D_
               <th>col5</th>_x000D_
             <tr>_x000D_
                       _x000D_
            <tr >_x000D_
              <td>data</td>_x000D_
              <td>data</td>_x000D_
               <td>data</td>_x000D_
              <td>data</td>_x000D_
              <td>data</td>_x000D_
            <tr>_x000D_
             <tr >_x000D_
               <td>data</td>_x000D_
              <td>data</td>_x000D_
               <td>data</td>_x000D_
              <td>data</td>_x000D_
              <td>data</td>_x000D_
            <tr>_x000D_
             <tr >_x000D_
                <td>data</td>_x000D_
              <td>data</td>_x000D_
               <td>data</td>_x000D_
              <td>data</td>_x000D_
              <td>data</td>_x000D_
            <tr>_x000D_
             <tr >_x000D_
                <td>data</td>_x000D_
              <td>data</td>_x000D_
               <td>data</td>_x000D_
              <td>data</td>_x000D_
              <td>data</td>_x000D_
            <tr>_x000D_
             <tr >_x000D_
                 <td>data</td>_x000D_
              <td>data</td>_x000D_
               <td>data</td>_x000D_
              <td>data</td>_x000D_
              <td>data</td>_x000D_
            <tr>_x000D_
             <tr >_x000D_
                 <td>data</td>_x000D_
              <td>data</td>_x000D_
               <td>data</td>_x000D_
              <td>data</td>_x000D_
              <td>data</td>_x000D_
            <tr>_x000D_
 </table>_x000D_
 </div>

HTML

<!DOCTYPE html>
<html>
<head>
    <title>RoboPage</title>
    <link rel="stylesheet" type="text/css" href="practice.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>
<body>

        <div class="container">
                <table class="table">
                  <thead>
                    <tr>
                      <th class="col-md-3 col-sm-3 ">First Name</th>
                      <th class="col-md-3 col-sm-3 ">Last Name</th>
                      <th class="col-md-6 col-sm-6 ">E-mail</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td class="col-md-3 col-sm-3">Top Row</td>
                      <td class="col-md-3 col-sm-3">Doe</td>
                      <td class="col-md-6 col-sm-6">[email protected]</td>
                    </tr>

                    <tr>
                      <td class="col-md-3 col-sm-3">John</td>
                      <td class="col-md-3 col-sm-3">Doe</td>
                      <td class="col-md-6 col-sm-6">[email protected]</td>
                    </tr>
                    <tr>
                      <td class="col-md-3 col-sm-3">John</td>
                      <td class="col-md-3 col-sm-3">Doe</td>
                      <td class="col-md-6 col-sm-6">[email protected]</td>
                    </tr>
                    <tr>
                      <td class="col-md-3 col-sm-3">John</td>
                      <td class="col-md-3 col-sm-3">Doe</td>
                      <td class="col-md-6 col-sm-6">[email protected]</td>
                    </tr>
                    <tr>
                      <td class="col-md-3 col-sm-3">John</td>
                      <td class="col-md-3 col-sm-3">Doe</td>
                      <td class="col-md-6 col-sm-6">[email protected]</td>
                    </tr>
                    <tr>
                      <td class="col-md-3 col-sm-3">John</td>
                      <td class="col-md-3 col-sm-3">Doe</td>
                      <td class="col-md-6 col-sm-6">[email protected]</td>
                    </tr>
                  </tbody>
                </table>
              </div>


<script src='practice.js'></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

CSS

thead,tbody,tr,td,th{
    display:block;
}
tbody{
    height:200px;
    overflow-y:auto;
    width: 100%;
}
thead > tr > th, tbody > tr > td{
    float:left;
}