6 ms·
Please make your table headings sticky
- swiftsalary 3y agoAll fine and dandy until you try to add horizontal scrolling to the table :(
- klyrs 3y ago... videos, not inline examples?
- happytoexplain 3y agoI'm not sure it's worth caring about. Either way seems to communicate the problem perfectly. They provide a playground with code.
- klyrs 3y agoBut my Canadian data rate...
- ivanjermakov 3y agoPerhaps because 4% of user agents don't support it.
- wenc 3y agoCSS sticky headings (the solution) won't work on the user agents that don't support it anyway, so they wouldn't be missing out. :)
- bruce511 3y agoThats not really an issue in this case. The only browsers not supporting it are ie11 and opera mini. (And a thing called QQbrowser which I confess I've never heard of.) I'm guess the 4% of traffic is largely ie11. If you are browsing the Web today with ie11 then there's a lot of css that isn't going to work right. And the impact of not supporting sticky is invisible - the table just works as it does now. So there's no -techical- reason not to use it. At this point it's either a cosmetic choice (mostly for overflow reasons) or unawareness of its existence.
- nox101 3y agoBecause the videos show the issue with out requiring instructions to the user on how to repo the issue being addressed. I've done this myself (usually with a gif though) because if I leave it as a exercise for the user to fiddle with 15% of them won't understand it.
- eirikbakke 3y agoI had a fun time generalizing sticky headings so they work for forms and nested tables: https://vimeo.com/566181649 https://vimeo.com/566181649 . Though that was in a Java app.
- LinguaBrowse 3y agoI'll give you sticky headers on one axis, but am still waiting for the day that CSS supports them on both axes: https://github.com/w3c/csswg-drafts/issues/8286 https://github.com/w3c/csswg-drafts/issues/8286
- RheingoldRiver 3y agoI've been watching the issue that spawned this one for maybe 8 years now. It's by far my biggest annoyance about the CSS spec. Sometimes you just need a gigantic data table, and you want that to be sticky top and overflow-x auto. Sorry, too bad, you have to pick one of these.
- ehnto 3y agoOne of the most challenging things I have done was when I got contracted to make both column and header sticky. Easy enough with a standard table, but this was in some wild VueJS extended third party library dynamic table with generated CSS as JS. It took me ages just to unravel where all the different CSS and JS actually came from and then I had to work around via overriding JS class functions and generated CSS etc. I felt really bad for the client because of how long it took. It also made me really careful with deciding on libraries when in Vue/React codebases. It's a very self-inflicted wound to require that much effort to do such a simple task. It's a table dangit, a HTML primitive, why am I like three JS classes deep and importing CSS as JSON?
- geraldwhen 3y agoWe design said they wanted row expansion. Then buttons in some cells based on rules open modals. Other cells have hover tooltips. And we need sort. Must have sort. And one of the table columns has editable values. But the edited value doesn’t affect the sort. It should affect the filter though. Did I mention we need filters? Also I need two sticky columns unless the user is a BobRole, then they should have 3 sticky columns and shouldn’t see column 9. The table will have 50,000 rows with pagination. Pagination must respect the sort and filter obviously.
- 3y ago
- frenchie4111 3y agoMake a browser extension that stickys all table headings :p
- Sargos 3y agoI wish table headers did this automatically. If devs do the extra work to use <th> tags then this is likely the behavior they already want.
- dheera 3y agoJust install a browser plugin that allows you to load a custom stylesheet on every page. Unfortunately I'm seeing an increasing number of websites using 500 <div>s with 45 nested layers of <div>s within each <div> to create a table instead of <table>s so it wouldn't work on those.
- thatfatboy 3y ago> Just install a browser plugin that allows you to load a custom stylesheet on every page. why have everyone do extra work when one person could do it for everyone else in about the same amount of time that it would take one client to do?
- madsbuch 3y agoMy take is that default styling is already bloated enough. Every-time I need to start out a new project, the first thing I do os to reset default styles. Also, we already have a situation where different browsers have different defaults leading to an overall worse UX of the web. So please, let's not do this.
- sbierwagen 3y agoNote that this requires giving the plugin permissions to read and write to all pages you visit. Browser extensions are routinely compromised by bad actors to steal banking passwords or bitcoin wallet keys. I use tampermonkey, but I have it restricted to just one domain, which it complains about every time chrome is restarted.
- amelius 3y agoPerhaps AI can automatically figure out how to do it for each page?
- amenghra 3y agothe CodePen looks better if top is set to offset the border (i.e. -1px instead of 0). It avoids the table body from bleeding above the header. Compare: https://codepen.io/bradleytaunt/pen/bGZyJBj https://codepen.io/bradleytaunt/pen/bGZyJBj With: https://codepen.io/alokmenghrajani/pen/ExMBQow https://codepen.io/alokmenghrajani/pen/ExMBQow
- userbinator 3y agoSome of us would rather say "please don't": https://news.ycombinator.com/item?id=32998091 https://news.ycombinator.com/item?id=32998091
- alacritas0 3y agoWhat's bad about the sticky property?
- throwawa14223 3y agoI want a dumb document. I don't want the thing where the header gets in the way of my clicking as I scroll.
- djbusby 3y agoIf we get OPs dream, it wouldn't.
- verticalscaler 3y agoI understand the sentiment but at some point you're asking for the underlying CSV file. In my opinion a little gear icon which lets you toggle sticky headers and other formatting options and downloadable data as plain text is ideal but good luck standardizing such things.
- nikisweeting 3y agoSame, I can't stand sticky headers, especially on anything involving longform text content. They also make web archiving significantly harder as scrolled screenshots cant be easily stitched together anymore to get the whole page.
- zaik 3y agoDon't archive the web by taking screenshots?
- 3y ago
- cxr 3y agoThere's nothing in the spec that says table headings disappear from view when you page down. This is a problem with your WWW reader. Nothing about this requires authors/publishers to be in the loop on this, each applying their own one-off hacky attempt to "fix" this. They really shouldn't be.
- josephcsible 3y agoIs there anything in the spec that says any specific element disappears from view when you page down?
- deleted 3y ago[deleted]
- panic 3y agoIt would break a lot of existing content to change something like this, unfortunately.
- cxr 3y agoNo it wouldn't.
- Biganon 3y ago...it absolutely would, yes. Tables are used everywhere, including for positioning stuff.
- cxr 3y agoActually think though the things you're saying when you say them. People generally don't put thead elements in tables that are used for positioning. Even ignoring that, there is no definition of "break" besides the most contrived and tautological for which allowing people to see table headings would break anything. Bolstering low-effort concern-trolling as if it's high-value commentary (i.e. well-received middlebrow dismissals) is known to be a problem on HN, and you're not making it better.
- lwhsiao 3y agoIn case you're one of the people implementing this and want your header's borders to also stick, you can do something like this table thead:before { content: ''; position: absolute; width: 100%; top: 0; border-top: 2px solid; } table thead:after { content: ''; position: absolute; width: 100%; bottom: 0; border-bottom: 1px solid; }
- nomilk 3y agoconfession: I somehow make just functional web apps with near zero CSS knowledge. I recently tried to make the header sticky on this ~20k row monstrosity: https://www.datasciencemeta.com/rpackages https://www.datasciencemeta.com/rpackages My first port of call was bootstrap table classes (hoping for a class="table table-header-sticky") but there's nothing of the sort. I fiddled with suggestions from stack overflow, GPT and codepen in ~20 minutes only got sticky headers working with weird side effects on the rest of the table. But in 2 minutes with the codepen from this article, I have it working. Pushing to prod now. Thank you!
- deleted 3y ago[deleted]
- rehevkor5 3y agoLooking at you, Confluence.
- nitwit005 3y agoThis didn't work for a long time. Chrome previously disabled position sticky on thead and tr elements: https://issues.chromium.org/issues/41303743 https://issues.chromium.org/issues/41303743 I remember the browser support matrix showed almost all green when it didn't work for tables in Chrome.
- iforgotpassword 3y agoYeah surprised too this is this simple now. Granted it was a while ago I needed this, but you had to add random cruft to the html and CSS to make this work across browsers. Which somehow didn't even surprise me because that's how webdev works in a nutshell.
- defanor 3y agoThere are nice little headings in the video. But sometimes there are larger (multi-line, with paddings) headings, or simply broken ones (e.g., custom fonts with icons that don't load), and such headings are more annoying than useful to have sticky. Especially with pages that also show their headers and footers at all times, leaving little space for the content. Which makes it one of those features that should be used with care (while it is occasionally useful, and so is raising awareness about it).
- Animats 3y agoNo, don't. The kewl design crowd will insist that the tables and rows be borderless and that the scroll bars disappear. You won't be able to see if the top rows of the table are showing.
- CrendKing 3y agoYou would think it's that easy to make the table heading sticky with just one `position: sticky;`, until you decide to do anything with the table content. I have a table with sticky head. Then I decide to add a memory feature, where if user scrolls the table body, and leaves the page, I'd save the index of the first visible row, and restore the scroll position when user comes back. I noticed that every time the restored position is always about one row too downward. For instance, when I want to restore to row 5, it restores to row 6 plus a few pixels. Turns out, once I turned the thead semi-transparent, I can see row 5 was indeed at the top of the table, but the thead just overlaps on top and making it look like row 6 is the first visible row. I told myself, no problem, I just modify the scroll position to be aware of the thead's height. It worked fine at first, but from time to from it'd still be off a few pixels. Turns out, because the table is huge, I'm doing lazy loading upon the scroll event. And because I'm using the default automatic table layout (instead of the fixed layout), sometimes certain head cell becomes too narrow and word wraps, thus increases the whole head's height. The final solution is to create a ResizeObserver[1] on the thead element and dynamically adjust the scroll position if its height changes. [1] https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver https://developer.mozilla.org/en-US/docs/Web/API/ResizeObser...
- amadeuspagel 3y agohttps://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-marg...
- murkt 3y agoOhh, thank you very much. I was avoiding sticky headers exactly because of this problem
- matsemann 3y agoOr make a paginated table? This sounds like a problem made by having infiniscroll pages.
- iforgotpassword 3y ago
- heads 3y agoAnd at the command line: headers to stderr, body to stdout. Without it you get this behavior: > heights | sort -k2 -nr George 186 Wally 173 NAME HEIGHT But if the headers bypass stdout then you get this instead: > heights | sort -k2 -nr NAME HEIGHT George 186 Wally 173
- xuhu 3y agoWhich one works best here ? Headers to stderr, or headers only if stdout is a tty ?
- quesera 3y ago...unless you're writing to a file, in which case you'll require a couple tries and a higher quantum of shell comprehension. This is a persistent limitation of the in-band text-only model. But I think this misuse of STDERR would be more confusing than helpful. If `heights` was a file, you could do this: % head -1 heights ; sed 1,1d heights | sort -k2 -nr If `heights` is an executable that would be expensive to call twice: % heights > /tmp/heights ; head -1 /tmp/heights ; sed 1,1d /tmp/heights | sort -k2 -nr Or you could pipe to `awk`, etc. Granted, these other options are less convenient, but they are also less surprising, and they work even if the executable creator has different ideas. Sometimes you gotta do what you gotta do.
- layer8 3y ago> heights | (sed -u 1q; sort -k2 -nr) does the right thing. (from https://stackoverflow.com/a/56151840 https://stackoverflow.com/a/56151840)
- robbiejs 3y agoInstead of sticky headers, I would suggest using a limited viewport height, so that the headers always remain visible. Like in DataGridXL (https://datagridxl.com https://datagridxl.com) disclaimer: I am the creator
- forgotmypw17 3y agoJust a thought: This is very difficult to navigate without a pointing device (e.g. using the keyboard.)
- robbiejs 3y agoNot sure what you mean. Keyboard controls are like Excel. What do you find difficult?
- forgotmypw17 3y agoOpen your page, and try doing these actions without touching your mouse. Some are just awkward, requiring a lot of Tab key. Some I have not figured out at all: Scroll the table down and up. Scroll the table right and left. Select some text in the table and copy it.
- robbiejs 3y agoI appreciate your feedback. However, I must admit that I still a bit in the dark about what is awkward about it. The component is used by a million+ end users and copies traditional Excel/Google Sheets controls. Are you familiar with those programs? DataGridXL is an Excel-like component for editing cell values, rather than a table component for selecting rows. I am curious though if the component is somehow not working like Excel for you... will you perhaps take the time to do a screen recording? I am curious to know what you find awkward, as I especially take pride in the usability of the component. (robbert@datagridxl.com)
- echelon 3y agoI'm not trying to criticize you, but I've never been a fan of this on mobile. I think the content should scroll with the page.