таблица thead фиксированное положение с верхним баром

Question

У меня есть верхняя панель, которую я установил в фиксированное положение при прокрутке. Ниже у меня есть стол. Я хотел бы, чтобы thead таблицы был исправлен после того, как верхняя панель установлена ​​на фиксированную, а строки таблицы должны прокручиваться позади этого thead, например here.

ЯШ:

$(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 
} 

Он прекрасно работает на фиксированной позиции верхней панели, но, к сожалению, не за столом.

Просмотреть мои jsfiddle.

Обратите внимание, что я не должен ограничивать высоту стола. Идея состоит в том, что пользователь всегда будет видеть 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