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 Philippe -- Philippe Wittenbergh http://l-c-n.com ______________________________________________________________________ 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/
