1

I am trying to make the columns header of my bootstrap table fixed so that when I scroll the data items of the table, the column headers don't move.

jsfiddle with example

I've tried the CSS below, however, it doesn't make the headers fixed and further messes up the entire look and feel of the table:

.table-fixed thead {
  width: 97%;
}
.table-fixed tbody {
  height: 230px;
  overflow-y: auto;
  width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
  display: block;
}
.table-fixed tbody td, .table-fixed thead > tr> th {
  float: left;
  border-bottom-width: 0;
}
Ravi Ubana
  • 397
  • 5
  • 26
Anthony
  • 33,838
  • 42
  • 169
  • 278
  • Did you try any of the other dups on this topic? https://stackoverflow.com/questions/21168521/scrollable-table-with-fixed-header-in-bootstrap, https://stackoverflow.com/questions/11483378/twitter-bootstrap-scrollable-table-rows-and-fixed-header – Carol Skelly Feb 13 '18 at 18:08
  • Can you update to the correct fiddle? It looks like this is just the bootstrap 3 template fiddle – maxshuty Feb 13 '18 at 18:17
  • @maxshuty updated: https://jsfiddle.net/DTcHh/42625/ – Anthony Feb 13 '18 at 18:18
  • @Anthony this gets you pretty close: https://jsfiddle.net/maxshuty/DTcHh/42626/ - obviously you will need to play around a bit to get things lining back up again – maxshuty Feb 13 '18 at 18:41

0 Answers0