[css-tables-3] Recommending to implement fixed header table by css · Issue #858 · w3c/csswg-drafts · GitHub
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-tables-3] Recommending to implement fixed header table by css #858

Open
workhours opened this issue Jan 6, 2017 · 13 comments
Open

Comments

@workhours
Copy link

As CSS Table is reworking, may I say the fixed header table is mostly wanted. The common way to implement a functional fixed header table now is by synchronizing 2 html tables with scripting, it's ugly and complicated. the best way is by giving a height measure to the tbody element if it can works:
#table tbody { height: 20em; }
Above example illustrate a table with a fixed body view of approximate 20 rows regardless how many rows of data it really loaded.

@FremyCompany
Copy link
Contributor

Thanks for the proposal but the current level of the specification tries to document how existing features work in browser, not to add new features.

@SelenIT
Copy link
Collaborator

SelenIT commented Jan 8, 2017

I recall that at some point this approach (fixed height + overflow:auto for tbody) actually worked, maybe in Firefox 1. The possibility to make part of a table scrollable without breaking vertical dependencies of columns (as existing solutions like position:fixed for thead do) seems really useful. Maybe it would make sense to introduce a new value of table-layout (or a new property) that would switch this behavior on?

@SebastianZ
Copy link
Contributor

@FremyCompany Are proposals like this collected somewhere or only kept here?
E.g. https://wiki.csswg.org/ideas offers itself for this.

Sebastian

@FremyCompany
Copy link
Contributor

I didn't close the issue here, just tentatively deferred to next level. I think this is the appropriate way to track proposals with our current GitHub workflow.

@smalllong
Copy link

I strongly support this proposal. Fixed, or sticky thead and tfoot are commonly used nowadays. However, it's not easy to achieve these effects by now. Since thead and tbody elements already exists, I think it's not hard for user agents to scroll tbody without affecting thead. I'm tired of using two tables to achieve this effect.

@FremyCompany
Copy link
Contributor

FremyCompany commented May 24, 2017

Your assumption is not accurate here because -- at least in Edge but I think also in Chrome -- these elements do not generate boxes. It's literally as if the cells were direct children of the table grid.

@FremyCompany
Copy link
Contributor

I would be curious to see how/if this could be solved for display:subgrid. If we can figure it out in that case, it might be possible to reimplement tables based on grid, and then support more scenarios.

@SelenIT
Copy link
Collaborator

SelenIT commented May 25, 2017

@FremyCompany but how does the background for these elements work, if it's not a box?

BTW, it seems that Chrome has recently fixed its very old bug with table rows and table row groups background rendering (probably in issue 122988)?

@FremyCompany
Copy link
Contributor

FremyCompany commented May 29, 2017

@SelenIT In our current implementation, the table draws multiple backgrounds in varying positions, to act as if the other elements had a background on their own.

Just checked the fixed Chrome bug. They fixed how the sub backgrounds are being painted, looks like we have the same issue they had, or similar. I don't have the impression they added a box for the thead, they just fixed the code that draws the backgrounds.

@SelenIT
Copy link
Collaborator

SelenIT commented Jan 4, 2018

Chrome has recently fixed a couple of bugs (1, 2) and now it supports relative and sticky positioning for internal table elements like table-row and table-row-group. Does it mean they started to generate real boxes for these display values?

@FremyCompany
Copy link
Contributor

I suspect that it would be the case, but I haven't taken a look yet

@SelenIT
Copy link
Collaborator

SelenIT commented Jan 8, 2018

By the way, as the sticky positioning for any part of the table becomes widely supported, wouldn't this mostly automatically solve this issue (with addition of just one scrollable wrapper)?

@FremyCompany
Copy link
Contributor

I agree. Edge does not support this scenario yet, though.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants