Table fixed header and scrollable body, problem with content behind header

Question

I have a table that needs a sticky header for vertical scroll. The table withotu scrolling looks like this:

Bu I have this problem when I scroll:

In the red square you can see that the body of the table are behind the header. If I put the border-top to 0 it solves the problem, but I need the table to have that border, I don't want to change the style.

The main css for the sticky header trick is this:

.tableFixHead {
    overflow-y: auto;
    height: 100px;
}

.tableFixHead thead th {
    position: sticky;
    top: 0;
}

.tableFixHead th {
    background: white;
    /*border-top: 0 !important;*/
}

.table-responsive-bold{
    font-weight: bold;
}

I have this fiddle to test the problem: https://jsfiddle.net/pmiranda/eaLv7qpn/1/

I also had to put the background color of the th elements in white. I took the idea from https://stackoverflow.com/a/47923622/3541320

Any suggestion?

Wait, so you can't reproduce it? Where do you see it then? I mean the fiddle works completly fine. — Quentin Albert, Aug 13 '19 at 15:49
If I understand the problem correctly are you saying that the stickiness is not a problem but it is just the border that you need? — Mike Poole, Aug 13 '19 at 15:49
On your fiddle it appears to working properly. Do you have any other accompanying css that you didn't include? It could also be a browser issue but I'm just speculating. I checked the fiddle on Chrome. — Matt Croak, Aug 13 '19 at 15:49
@MikePoole, yes, the problem is with the border, I don't want that behaviour (when the tbody is showing behind the header when I scroll down). I edited the link of the fiddle with a `/1/` version that shows the actual problem. — pmiranda, Aug 13 '19 at 15:52
@pmiranda I thought that was the case. I have suggested adding the border to the thead in an answer below. I hope this is what you are after. — Mike Poole, Aug 13 '19 at 15:57
Please include all relevant code in a [mre] here on Stack Overflow, not just on an external site. You can use [Stack Snippets](https://meta.stackoverflow.com/q/358992/215552) to do so. — Heretic Monkey, Aug 13 '19 at 16:00

score 3 · Accepted Answer · answered Aug 13 '19 at 16:02

3

It's because you have border-collapse set to collapse. Remove it and taking the spacing to 0px. Then add in your border.

.tableFixHead { overflow-y: auto; height: 300px; }
.tableFixHead thead th {position: sticky;  top: 0; }
.tableFixHead th { background: white; }

/* Just common table stuff. Really. */
table  { width: 100%; border: .5px solid black; border-spacing: 0px;}
table td, table th { border: .5px solid black;  }

https://jsfiddle.net/7kasL5mg/

answered Aug 13 '19 at 16:02

Keith

4,059
2
32
56

This is a better solution than mine :) – Mike Poole Aug 13 '19 at 16:07
Yes, I was reading the link of the duplicate question, thanks, this is what I needed it. – pmiranda Aug 13 '19 at 16:09

Mike Poole · Answer 2 · 2019-08-13T16:02:29.623

0

To retain the border while you have the sticky header you will want to use this CSS for your thead:

.tableFixHead thead th { position: sticky;  top: 0;  border: 1px solid #c0c0c0;}

I have chosen #c0c0c0 as the color but you can use whatever grey you wish.

Here is a screenshot of the fiddle where the border style is added:

edited Aug 13 '19 at 16:02

answered Aug 13 '19 at 15:52

Mike Poole

1,958
5
29
41

It still looks like it's happening in the fiddle. – Matt Croak Aug 13 '19 at 15:56
@M.C. what looks like it is still happening? – Mike Poole Aug 13 '19 at 15:57
The border still disappears. – Matt Croak Aug 13 '19 at 15:58
The thead kept its border when I added the border CSS to a fiddle. I will add a screenshot to my answer. – Mike Poole Aug 13 '19 at 16:00
@MikePoole Wouldn't better a new fork of the fiddle? – pmiranda Aug 13 '19 at 16:02
Interesting. On mine it doesn't. Could it be the browser? I'm on Chrome. – Matt Croak Aug 13 '19 at 16:03
@pmiranda sure, I can fork the fiddle if you want but did not think it was worth it just to add `border: 1px solid #c0c0c0;`. – Mike Poole Aug 13 '19 at 16:05

Table fixed header and scrollable body, problem with content behind header

2 Answers2