StickyTableHeaders icon indicating copy to clipboard operation
StickyTableHeaders copied to clipboard

Side Scroll

Open johnenrick opened this issue 7 years ago • 6 comments

Very wide table that has side scrolling don't work

johnenrick avatar Jan 16 '18 08:01 johnenrick

I was going to mention this, this is especially true on mobile. When you have a lot of headers and have to scroll on the x axis, the header does not scroll with the table body.

MidnightHoosk avatar Feb 07 '18 15:02 MidnightHoosk

Is there already a solution for that? It looks to work in http://jsfiddle.net/jmosbech/stFcx/ . What are we doing wrong?

buzanits avatar Mar 11 '19 22:03 buzanits

@buzanits what we are talking about is that the table is scrollable horizontally, not the whole document. Example is the bootstrap table responsive

johnenrick avatar Mar 12 '19 18:03 johnenrick

@johnenrick Is there a solution? A workaround?

buzanits avatar Mar 12 '19 18:03 buzanits

I place the table inside a div, and made that div to have the overflow-x: scrollable. In the case of bootstrap, I place the .table-responsive class to the parent div of the table instead of placing the class to the table itself

johnenrick avatar Mar 12 '19 18:03 johnenrick

Your will have a problem because your table head will not scroll and your table body will scroll. You can put your table into a div with overflow-x : auto;, like you said. Then add a listener on your div to trigger the librairy event:

$('#yourScrollDivId').scroll(function () {
      $(window).trigger('resize.stickyTableHeaders');
})

It works but you have a little delay bewteen the two scrolls (not so bad)

KevinBouzidi avatar Apr 02 '19 12:04 KevinBouzidi