On Thu, Jul 3, 2014 at 6:27 AM, Philippe Wittenbergh <e...@l-c-n.com> wrote: > > Le 2 juil. 2014 à 04:19, Larry Martell <larry.mart...@gmail.com> a écrit : > >> But I want the table to be scrollable with a fixed header, so I do this: >> >> http://jsfiddle.net/mrLVG/ >> >>> From testing I found that I have to have display: block; on both >> tbody.scrollContent and thead.fixedHeader tr or I do not get the >> scrollbars and fixed headers. But it is also the display: block that >> seems to be causing the misalignment. >> >> Is it possible to have a scrolling table with fixed headers without >> explicitly specifying the table cell sizes? > > By setting display:block on the tbody, you essentially remove the > “tableness”. As a result the browsers actually recreate a table inside your > tbody, wrapping around all your tr/td [*]. Same applies to your thead tr. > Messy situation… You might fix it partly by locking the width on each th/td - > which is no very attractive (cough… understatement). > > Have you seen this stack overflow? > http://stackoverflow.com/questions/21003235/creating-a-sticky-header-on-a-thead > No clean solutions, though. > > In the future, creating such a table-with-fixed-header will be much easier > thanks to position: sticky > http://dev.w3.org/csswg/css-position-3/#sticky-positioning > > That is already implemented in Safari 6.1/7, is coming to Firefox 32, and is > implemented behind a flag in Bink based browsers (Opera, Chrome) – ask > $search_engine for the details about that flag. Unfortunately sticky > positioning on a table-header is not yet implemented; it works in Webkit > nightly builds but not in release builds, yet. Firefox has an open bug for it. > > Quick Example™: > http://dev.l-c-n.com/_temp/scrollable-table.html > The ‘some fixed heading’ is already sticky in Safari 7, the table works in > WebKit nightly builds and maybe Opera/chrome with the aforementioned flag > turned on. > > [*] see the CSS 2.1 spec for the reasons: > http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes
Thanks for the detailed reply. I had seen a lot of SO posts about this, but not the one you gave. I'll check it out. The problem with specifying an explicit width for each column is that I have 10 tables, each with 30-40 columns, and I don't always know the width of the data. Also, we sort a table sorting package and that puts an up/down arrow in the header when you click on it, and that changes the width of the column. All this new stuff sounds promising, but the client doesn't use Chrome, and only allows FF version 12 and IE version 9. Hard to believe, but true. They were running PHP version 5.1 and it took me 3 months to get them to upgrade to 5.4. ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
