Open goodseller opened 9 years ago
It's not possible via CSS without breaking the table's automatic column widths.
Here's the closest I could get, but it requires a width: http://jsfiddle.net/developit/sdvuu1nx/
It looks good with the above hacks.
Seem it needs to apply the width attribute to all
@goodseller / @connors one useful outcome here could be adding support for using the table
styles on non-table nodes. This is obviously possibly by passing Photon through a preprocessor, but it could be use to "export" the styles as .table
, .table-row
, etc. Tables can be useful for showing tabular data, but there are just a lot of cases where they stop working even though data is still very much tabular.
For example: http://jsfiddle.net/developit/j8swt8zb/ (scroll-list)
@developit Yeah that might be a solution. We might even be able to use position: sticky
to acheive the desired effect on table headings. I'll look into it.
Sounds promising. I actually ended up rolling with the separate header table solution, but ran into more general issues with tables being unweildly to work with, so I'm probably switching to a static or flexbox layout to get around automatic column widths.
any more on this? I think having a sticky table header is a must for real apps!
Does anyone know how to make it works?
I have tried a few times but currently things turn like this:
But I am hoping something like this:
http://jsfiddle.net/TweNm/
Here is some workarounds (I can not make it work as it said): http://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody
Thanks.