Pure CSS fixed table header?

Question

I'm using Semantic UI for the CSS base. Here's a fiddle I've been working on.

I'm having trouble getting the existing answers working from googling around. They all seem to have this problem where there is a ton of whitespace to the right.

I'm trying to get it working such that it integrates nicely with the existing CSS of semantic UI to look good (no whitespace to the side), but I'm not having any luck and I've been at it for a while.

It's fine if this only works with newer browsers since I'll be using electron anyway.

This CSS looks like it's required but I'm not sure how to modify it to work properly with what I have:

tbody, thead tr { display: block; }

tbody {
  height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
}

Have you tried removing tbody, thead tr { display: block; }? IS that how you want? — Eugine Joseph
– Eugine Joseph, Commented Jan 14, 2018 at 3:58
If I remove that then the header scrolls too. I want it to have a fixed table header like the one in this example codepen.io/tjvantoll/pen/JEKIu I can't get the existing examples to work with Semantic UI though.. — Indoor Picnic
– Indoor Picnic, Commented Jan 14, 2018 at 4:07
Please check this. jsfiddle.net/70k3mvzj/10. If it is ok, you may have to update the styles. — Eugine Joseph
– Eugine Joseph, Commented Jan 14, 2018 at 4:19

Jonathan Chaplin · Accepted Answer · 2018-01-14 04:17:45Z

1

The source of the whitespace problem seems to be the ui class. It has several media queries on it that cause the content to re-flow at smaller screen sizes. If you look at the media query it doesn't apply if you add the class stackable to your table like below.

<table class="ui striped table unstackable">

Also, you only have 4 columns, seems like you want 5. Make the following change.

tbody td, thead th {
    width: 140px !important;
}

thead th:last-child, tbody tr td:last-child{
    width: 296px !important; /* 140px + 16px scrollbar width */
}

Working fiddle here

edited Jan 14, 2018 at 4:17

answered Jan 14, 2018 at 3:46

Jonathan Chaplin

2,4721 gold badge19 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Indoor Picnic Over a year ago

That fiddle doesn't work for me on the latest version of Chrome or Firefox. The header isn't fixed and there's no scrollbar. Also getting rid of ui gets rid of all the styling =(

Jonathan Chaplin Over a year ago

Got it. I'll revise my answer.

Indoor Picnic Over a year ago

I still see a bunch of whitespace on the right. Not sure if it's a problem on my end or not i.imgur.com/3pGldFV.png

Jonathan Chaplin Over a year ago

Updated. Some of the styles were getting over-ridden in the stylesheet. "!important" takes care of that. Also, your comment says you want 5 columns and your html only has 4. Check the fiddle in my answer.

Jonathan Chaplin Over a year ago

I made the width on td and th = 2 times col width plus 16 to compensate for extra column.

|

Collectives™ on Stack Overflow

Pure CSS fixed table header?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related