Bootstrap Fixed Header table

Question

I am trying to implement fixed header table with Bootstrap. As bootstrap 3.3.5 is not natively supporting fixed header table, based on this https://bootsnipp.com/snippets/oVlgM I came up with nice scroll.

However it looks ugly when there is no scroll. I tried to fix for a while, but couldn't fix it. I am not an UI expert.

Scroll version Looking nice. https://jsfiddle.net/cdc57pzm/

Without scroll ugly https://jsfiddle.net/suwLv1md/2/

Data not aligned properly
Line exceeds out of table

Can some one help me ?

I tried changing below to 100%, but scrollable version breaks..

.table-fixed thead, .table-fixed tfoot {
    width: 97%;
}

score 0 · Answer 1 · answered Jun 01 '17 at 13:31

0

Please Try This dude,

.table-fixed thead, .table-fixed tfoot {
width: 100% !important; }

answered Jun 01 '17 at 13:31

Gündoğdu Yakıcı

677
2
10
31

Already tried. its breaking the data and not aligned properly. That's my problem https://jsfiddle.net/cdc57pzm/2/ – Developer Jun 01 '17 at 13:34
I need it with footer. Also without data alignment issue as we are showing total in footer – Developer Jun 01 '17 at 13:58
When I updated with my table data its not fitting properly and data is not aligned in the right position. Also footer not aligned. https://jsfiddle.net/cdc57pzm/5/ – Developer Jun 01 '17 at 14:19
Just highlighting the root cause https://jsfiddle.net/cdc57pzm/6/ Something problem with the width and scroll – Developer Jun 01 '17 at 14:24

score 0 · Answer 2 · answered Aug 05 '17 at 16:06

I think it would work if you also set the width of tbody to 97%, like the thead and tfoot. This would mean a little change to the top and bottom of your css, like this:

.table-fixed thead, .table-fixed tfoot, .table-fixed tbody {
    width: 97%;
    }

@media (max-width: 767px) {
    .table-fixed thead, .table-fixed tfoot {
        width: 97%;
    }
}

Like in this fiddle: https://jsfiddle.net/hpvl/suwLv1md/4/

score 0 · Answer 3 · answered Aug 10 '17 at 15:10

So if you can use some JQ this is what I found works I use this in a couple different tables I have. Some are created by Knockout.js, some are dynamically created using some PHP and autoscroll, and some are static. The concept that makes them work is all the same.

The CSS:

table thead {
  width: 100%;
  display: block;
  position: relative;
}

table tbody {
  display: block;
  overflow-y: hidden; /* Or what ever you choose */
  overflow-x: hidden;
  height: 350px; /* Percents don't really work in a dynamic setting so keep that in mind */
}

The JS:

$(table + ' tbody tr:last-of-type td').each(function(a, b, c) {
  var w = $(this).css('width'),
    i = parseInt(a);

   $(table + ' thead tr th').eq(i).css('width', w);
});

Pretty much it's the JS that makes it work, the key is we have to set the header cells to the same width as the body. So what happens when we have a table body that will scroll, the browser sneaks the width of the scroll bar off the last cell. this gives us our mismatch with the header cells and the body cells. Good practice in this case if you need to make your table fluid is use percents on all the columns except the last one this way results are predictable.

This post pointed me in the right direction.

EDIT:

I forgot to mention all instances I have this implemented are bootstrap-3 tables.

Bootstrap Fixed Header table

3 Answers3