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.

Have you looked at http://stackoverflow.com/questions/8321849/how-to-scroll-tables-tbody-independent-of-thead ? — perennial_, Aug 22 '16 at 17:46
why must the table height not be limited? you could always use a `vh` if you don't want it to be a pixel value, and it becomes dynamic — perennial_, Aug 22 '16 at 18:31

score 0 · Answer 1 · answered Aug 22 '16 at 17:57

0

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

answered Aug 22 '16 at 17:57

Head In Cloud

2,001
1
8
10

You can achieved this without javascript – Head In Cloud Aug 22 '16 at 17:58
but the height is limited - height: 300px; – Dejell Aug 22 '16 at 18:02
you can set height whatever you want – Head In Cloud Aug 22 '16 at 18:04
or you can also make dynamic height with javascript – Head In Cloud Aug 22 '16 at 18:05
also, the top bar doesn't scroll up as in my jsfiddle – Dejell Aug 22 '16 at 18:11

table thead fixed position with top bar

1 Answers1