[Feature requests] Table scroll

[goodseller]

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.

[developit]

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/

[goodseller]

It looks good with the above hacks.

Seem it needs to apply the width attribute to all element or it will breaks as content changes.

http://jsfiddle.net/66yca1re/

[goodseller]

I found another issue:

http://jsfiddle.net/m9jbxn3a/

Seems js is a must to do so.

[developit]

@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)

[connors]

@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.

[developit]

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.

[bradparks]

any more on this? I think having a sticky table header is a must for real apps!