0

That question again...

In CSS, only the whole table can scroll, there's no easy way to keep the header or footer fixed.

Most answers here rely on Javascript, which makes resizing unbearable, or depend upon a fixed column width, which defeats the point of a <table>, or a fixed table with.

Here's a CSS only solution that doesn't mess with the table's properties: https://codepen.io/Lasheimok/pen/jZqRvp

It uses Firefox's -moz-element property to mirror the header and footer on empty div's outside the table. So all of the table's styling still works - stretching width to content, alignment in headers, no delay while waiting for Javascript to redraw the table...

But there are still some problems:

  • most obvious one: it's Firefox only
  • when scrolling left and right, the table scrolls, but the header and footer don't
  • there's an empty space at the bottom of the table where the footer is hidden

I haven't looked much into a Chrome version, but it does have a similar property that could be used instead.

Mostly I need help with the last two points: How to have the header scroll horizontally together with the rest of the table, and how to remove the empty space of the hidden footer at the bottom of the table?

lyle
  • 757
  • 1
  • 7
  • 18
  • Can you please provide us with a snippet of you code? And have you tried to separate the header from the table? – Elydasian Feb 05 '18 at 09:25
  • Check out this one... It might help you. https://stackoverflow.com/questions/130564/how-can-i-let-a-tables-body-scroll-but-keep-its-head-fixed-in-place – Bhargav Trivedi Feb 05 '18 at 09:47
  • @newbie There's a fully working example with all the code in the codepen link. – lyle Feb 06 '18 at 02:21
  • @BhargavTrivedi All those answers either depend on a fixed height for the table or use Javascript. – lyle Feb 06 '18 at 02:22

1 Answers1

0
I fear you should be using some kind of fixed table header plugin.
What they mostly do is create a second table that is fixed, and copy the header html in it. So you have two tables. 

->one with header data

->one with body data.

It should be with javascript, as there is semantically no good way to fix 
this pure in html & css.
If you make up you mind for using js. 
You can go to this url ... 
https://codepen.io/paulobrien/pen/vJLdOE
Bhargav Trivedi
  • 15
  • 1
  • 6
  • Using two tables is not an option as the content of the table is editable, so the column width is not fixed even after the table is displayed. – lyle Feb 07 '18 at 01:19