ultimate-comparisons / ultimate-comparison-framework

The base of all ultimate-comparisons. Follow the README and create your own ultimate comparison.

http://ultimate-comparisons.github.io/ultimate-comparison-framework/

MIT License

16 stars 7 forks source link

Sticky header with CSS #87

Closed koppor closed 6 years ago

koppor commented 7 years ago

The current solution for sticky headers is based on JavaScript. Please check whether it is possible to revert that solution and to use position. sticky (See http://gedd.ski/post/position-sticky/). If that is impossible, please describe why.

Browser support is listed there: http://caniuse.com/#feat=css-sticky

Demo: http://html5-demos.appspot.com/static/css/sticky.html

Refs https://github.com/ultimate-comparisons/ultimate-comparison-BASE/pull/31

koppor commented 7 years ago

Hint: Use top css in addition - see https://stackoverflow.com/a/43707215/873282

kleinech commented 7 years ago

wontfix

Sticky headers do not work together with table header display: table-header-group;.

Other display styles do synchronize the dynamic width between the table header and the table data.

A css-grid solution might come handy in the future but the feature display: subgrid has been excluded for Firefox and Chrome in the first Version of css-grid (https://github.com/w3c/csswg-drafts/issues/958).