css - Responsive table scrollbar overlaps fixed header

Question

I’m having a problem in which I hope some of you know the solution.

I’m making a website responsive en for mobile the header will go to the bottom of the screen. So far no problems. On some of the pages they use tables, which get a horizontal scrollbar on mobile (bootstrap 4 – responsive tables). When is scroll down the scrollbar of the tables is overlapping my fixed header.

Is there somehow a solution for this problem? When I check the bootstrap 4 website en check some dashboard themes they made themselves, they have the same problem. (example: https://prium.github.io/falcon/v1.8.0/)

Please let there be a solution for this.

标签： cssbootstrap-4

Answer 1

添加z-index:1;到您的表卡 div

.card.mb-3 {
    z-index: 1;
}