Fixed tbody line when scrolling

Question

I want to fix the first line (total line) of my table (tbody) so it can be visible when scrolling.

I tried all combination between absolute/fixed/relative position but it didn't work.

Please check this jsfiddle, I want to fix the "fixedTable" so it can be always visible and to scroll inside the parent div not out of the parent div

Thanks for your help.

The simple answer is that it cannot be done. Search SO - there are loads of questions asking about similar functionality - and there are some workarounds. — Aleks G, Jul 09 '13 at 08:17
It seems there's a workaround, please check [this SO answer](http://stackoverflow.com/a/10922732/1169519), though there's a lotta of code. — Teemu, Jul 09 '13 at 08:23
why 2 tables ? you break the meaning of your table.Use thead and tbody — G-Cyrillus, Jul 09 '13 at 08:24

G-Cyrillus · Accepted Answer · 2013-07-09T09:15:29.567

1

You may use one single table to keep the sorting and readability of your datas , and fixed thead or tfoot as a trick inside a container.

http://codepen.io/gcyrillus/pen/aJysI This was an answer to a french forum for a table that had row and colspan in header and needed somehow to be scaled without breaking columns.

The trick is to clone thead as a tfoot and set in absolute position tfoot.
Tfoot overlap your table and on topscroll 0, it stands over thead. Parent container is scrolling table underneath of tfoot.

edited Jul 09 '13 at 09:15

answered Jul 09 '13 at 08:30

G-Cyrillus

101,410
14
105
129

no js nor display involved, just a well formed table :) – G-Cyrillus Jul 09 '13 at 08:39
Am I the only one who doesn't see a table at this codepen fiddle? – otinanai Jul 09 '13 at 08:55
@GCyrillus This is an convincing answer, I guess there's just a typo in the link / wrong link. Can you please fix the link, this looks interesting... – Teemu Jul 09 '13 at 09:02
oups, sorry , here it is : http://codepen.io/gcyrillus/pen/aJysI – G-Cyrillus Jul 09 '13 at 09:15
I don't know if I was clear, but I need to scroll to right and I want the table to scroll inside the parent div. – user1856386 Jul 09 '13 at 09:58
nop, you were not clear, what you want is done with overflow:auto . no magic , just regular CSS to my on opinion ;) – G-Cyrillus Jul 09 '13 at 10:20

Fixed tbody line when scrolling

1 Answers1