table thead fixed position with top bar

Question

I have a top bar that I set it to fixed position on scrolling. Below I have a table. I would like the thead of the table to be fixed once the top bar is set to fixed, and the rows of the table should scroll behind that thead like here .

js:

$(document).ready(function() {
  var fixmeTop = $(".fixme").offset().top;
  var countriesTableTop = $(".fixme").height() + 20; //20 is the margin
  $(window).scroll(function() {
    var currentScroll = $(window).scrollTop();
    if (currentScroll >= fixmeTop) {
      $(".fixme").css({"position": "fixed", "top": "0", "left": "0"});
      $(".countries-table thead").css({"position": "fixed", "top": countriesTableTop});
    } else {
      $(".fixme").css("position", "static");
      $(".countries-table thead").css("position", "static");
    }
  });
});

css:

.fixme {
  width: 100%;
  margin-top: 0 !important;
  background-color: #000;
  z-index: 5000;
  margin-bottom: 20px;
}

.countries-table {
  width: 100%;
  background-color: silver;
}

.countries-table thead {
  font-weight: bold;
  z-index: 200
}

It works just fine for the top bar fixed position, but unfortunately not for the table.

See my jsfiddle .

Please note that I don't to limit the table height. The idea is that the user will always see the thead.

Answer 1

Try This

.fixme {
    width: 100%;
    margin-top: 0 !important;
    background-color: #000;
    z-index: 5000;
    margin-bottom: 20px;
}
.countries-table {
    width: 382px;
    background-color: silver;
    table-layout: fixed;
}
.countries-table thead tr {
    font-weight: bold;
    display: block;
    position: relative;
    background: #333;
    color: #fff;
    width: 383px;
}
.countries-table tbody {
    display: block;
    overflow: auto;
    width: 100%;
    height: 300px;
}
.countries-table thead tr td:nth-child(1),
.countries-table tbody tr td:nth-child(1) {
    padding: 4px;
    width: 190px;
}
.countries-table thead tr td:nth-child(2),
.countries-table tbody tr td:nth-child(2) {
    padding: 4px;
    width: 190px;
}
.countries-table tbody tr:nth-child(odd) {
    background: #f5f5f5;
}

CLICK HERE FOR DEMO