Non-transparent white background but keep borders on table

Question

I have almost successfully made the left columns of my table sticky, so that the rest can be scrolled. This, however, has created a new problem: the table background is white, which means scrolled cells transpire underneath the sticky cells (see screenshot 1). To resolve this, I've made the background of the sticky cells non-transparent by using background-color: rgba(255, 255, 255, 1.0);. But this also removes the borders of the sticky cells (see screenshot 2). Both variants are ugly.

I've tried adding border:1px solid #cdcdcd; (even adding !important) to the sticky cells but the borders are still invisible. Any suggestions?

Here's the entire formatting applied to the table:

div#scrollable {
   overflow-x: scroll;
}
table#stats {
   border-collapse:collapse;
   width:100%;
}
table#stats th.sticky, td.sticky {
   position: -webkit-sticky; /* for Safari */
   position: sticky;
   left: 0;
}
table#stats td.sticky {
   background-color: rgba(255, 255, 255, 1.0);
   border:1px solid #cdcdcd !important;
}
table#stats tr#means {
   background-color:#ddffd5;
}
table#stats td.stats {
   border:1px solid #cdcdcd;
}

transparent sticky cells non-transparent sticky cells

Adrien Leloir · Accepted Answer · 2020-04-27T11:32:19.243

0

I did not find any other solution than this

th.sticky:after, td.sticky:after{
    content : "";
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: 1px;

    background-color: #cdcdcd;
}

EDIT : Other solution here Stack overflow post

edited Apr 27 '20 at 11:32

answered Apr 27 '20 at 08:42

Adrien Leloir

513
4
8

Thanks! I changed the bottom position to -1px to level it perfectly with the cell border. Any idea how to also create a vertical "border" as the visual effect is still not to my taste? I've tried the following: `th.sticky:left, td.sticky:left { content: ""; position: absolute; left: 1px; display: block; width: 1px; height: 100%; background-color: #cdcdcd; }` but to no avail. – cheeseus Apr 27 '20 at 11:20
You can use pseudo classes :before to do it but maybe you have other best solution here : https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element – Adrien Leloir Apr 27 '20 at 11:30
Yes! This does work! I only need to figure out which borders to add to get it right in my case now. Thank you. – cheeseus Apr 27 '20 at 14:28

Non-transparent white background but keep borders on table

1 Answers1