0

I currently have a data table that I would like to have horizontal, vertical scrolling, and a fixed header. For columns I have between 15-20 and for the rows I would like to show up wards to 50 at a time. Right now I am using Bootstrap4 and React.

Issues I have come across in some solutions:

  • requiring fixed columns (I would like to auto-size columns)
  • relying on a jQuery plug-in (for various reasons I would like to avoid mixing jQuery and React)
  • detaching the header works for horizontal scroll, but not for vertical scroll
  • Using table-layout:fixed resizes all the columns to the same widths

This is what I've tried so far:

tbody {
display:block;
height:200px;
overflow-y:scroll;
}

thead {
display:table;
width:98.7%;
table-layout:fixed;
}

tbody tr {
display:table;
width:100%;
table-layout:fixed;
}

I've tried looking for a solution in this previous post here

Community
  • 1
  • 1
Fu-Lin Liu
  • 1
  • which ones are you trying to stick ? alike this one https://codepen.io/gc-nomade/pen/WVXPNP or that one https://codepen.io/gc-nomade/pen/abboqbR ? (columns can be any size). – G-Cyrillus Oct 03 '19 at 22:08
  • In terms of scrolling I am aiming for something like this. https://jsfiddle.net/3vzrunkt/ – Fu-Lin Liu Oct 03 '19 at 22:52

0 Answers0