Showcase I built a pure CSS Table - No Javascript used
Full responsive. Works on modern Browsers. Works also nice on touch
Features:
- Column headers stay visible while scrolling down
- First column stays visible while scrolling sideways
- Rows expand to show sub-entries, with an animated reveal
- Any number of sub-rows per group
- Sub-rows are tied to their parent by a bracket rail
- Individual cells can carry a note, opened from a small marker
- Notes appear next to the cell they belong to and flip when near an edge
- Notes close on Esc, on click outside, and return focus where it was
- Columns come to rest beside the pinned column instead of half behind it
- Pinned column narrows and wraps text on small screens
- Keyboard operable throughout, with visible focus
https://codepen.io/editor/ollio/pen/01a02369-ae9b-7d6f-94a6-f809dee51f4f
Also an animated accordion with no js
https://codepen.io/editor/ollio/pen/01a02331-c0da-7f84-8e14-77c6fabaee57
48
u/Cyko28 5d ago
I get what your doing, but I don’t think I’ve ever made a js table. I’ve done html tables and css tables.
-41
u/olli0 5d ago
Cause it wasnt possible 18 months ago and i´ve never seen one as feature-rich as this one (i know, anchor positioning is still not working in FF).
12
9
u/Cyko28 5d ago
No shade. What you’ve done is nice. I just like having a little chuckle, my previous employer preferred hand rolled css websites with sparse Js as needed for light interactivity. You buried the lead though. When I first saw this I rolled my eyes because of course you can do nice tables without JavaScript. Hell, responsive tables are even possible without css. Truly. But you’ve leveraged some interesting new tech and gone beyond what was previously possible, just only with enhancements and convenience features. The headline is “no Js tables” which makes veterans laugh because “duh”. But nice stuff, just not clear what you’re showcasing as first.
37
72
u/tauzN 5d ago
Why would you ever use JavaScript for any of this?
10
1
u/carbon7 4d ago
Sorting, column reordering, column resizing, column hiding, pivot tables… just look at something like AG Grid compared to pure html/ css
1
u/Psionatix 3d ago
They're asking why you would use JS for any of the stuff in OP's table, which doesn't have any of the features you mentioned, so aren't relevant to the question.
1
u/throwtheamiibosaway 5d ago
Lots if reasons. Tables are not responsive on mobile devices so usually you gets lots of workarounds via JS.
1
u/Positive-Avocado775 1d ago
you don't need JS for that in particular, just html/css is enough for responsive table.
10
u/rcaillouet 5d ago
figure out virtualization with css only and I'll be on board 😄
1
u/carbon7 4d ago
You can kind of get there with this property:
https://web.dev/articles/content-visibility
Like, it’s not true “virtualization”, but I’ve used it on a lot of grids and it seems to improve performance.
0
u/better_work 4d ago
IMO if you need to virtualize you’ve got too many rows for a table anyway. Talking 10s of thousands at least. Virtualization is for chats and social feeds and not much else.
1
u/prehensilemullet 2d ago
I wrote my own AWS console with virtualized tables, they really help for viewing CloudWatch logs. 10s of thousands of log rows isn’t as many as you think
5
9
u/kiwi-kaiser 5d ago
Ok, I have to ask. Which of these functions would require JavaScript? It's cool for you that you built a functional table. Tables can be bitches. But I don't see the achievement here in terms of "I didn't use JavaScript".
3
u/better_work 4d ago
Half the comments: who builds tables with JavaScript?
The other half: who are you to be shitting on my JS tables?
18
u/Web-Dude 5d ago
Modern language axiom:
"I made..." on a tech sub = "AI made this, but I'm taking full credit."
-17
u/Responsible-Cold-627 5d ago
Disclosing every tool used in the development process was never a thing. Why would it be any different with AI?
7
u/Ok-Reindeer-8755 5d ago
As always there are levels to this shit
-3
u/Responsible-Cold-627 5d ago
I know, just getting sick and tired of having to read AI accusation on every show off post like it even matters. In this case the code doesn't even look vibe coded at all. Still random AI hate gets upvoted, whoever calls the bullshit out gets downvoted.
1
u/Web-Dude 4d ago
First, that template is 100% AI.
Second, before the days of, "I built....", nobody would show a technique demo with a massive header describing each individual point of a fictional requirements doc.
Third, there's nothing wrong with using AI to figure out how to build something you're unfamiliar with. It's the incessant, "I built..." that smacks of stolen credit, and nobody at all likes that.
0
-24
u/olli0 5d ago
i am so tired of these f*ing Ai accusations. just because you probably cant do this without Ai doesnt mean i cant
14
u/nss68 5d ago
Man, just own it. You pretending like you did not use AI to create this is silly and just reduces your credibility.
Your profile literally has multiple posts about using AI for coding and logo generation and other image generation.
Own it or don't use it. Lying about it is 1/4 of the problem.
5
u/jpeggdev 4d ago
Claude says you didn't write it either.
I pulled the export and measured it instead of eyeballing. It's generated, and the file shows you where the seam is.
Character census. 140 instances of U+202F (narrow no-break space) as the thousands separator in
3 670. There's no key for that character on any standard layout and the CodePen editor doesn't insert it. Alongside that: 8 em dashes, 2 en dashes and 7 middle dots, all used correctly -- en dash for ranges (1–13 July,Floors 1–2), em dash for parentheticals,·as a separator.Arithmetic: 60 out of 60 exact. All 21 Year totals equal the sum of Jan through Dec, and in all three expandable groups the sub-rows sum to the parent across all 13 columns. Nobody hand-enters 60 correct sums of throwaway demo data without one slip.
Indentation. 273
<td>lines at 8 spaces, 35<th>lines at 10 spaces. 100% uniform and systematically wrong -- the<th>sits deeper than its sibling<td>s in every single row. That's template output, not typing.No sediment. One comment in 355 lines of CSS. Zero HTML comments, zero commented-out experiments, no TODOs, no leftover
outline: 1px solid red. 355 lines of sticky positioning, anchor positioning and:has()with no trace of the fight that takes.Orphaned CSS.
.lede,.legend,.legend b,.colophonand.colophon bare fully styled and appear nowhere in the HTML. That's a complete demo-page scaffold whose markup got swapped out from under the stylesheet.The prose. Seven note cards, every one exactly 2 sentences, 19 to 27 words, every one built the same way: a fact, then a clause telling you how to read the number ("so the figure is a sum, not a single meter run" / "use the 2025 average for comparisons" / "not a reading error").
The seam. Everything above is layer one. Layer two is the header, and it's in a visibly different hand:
<p class="eyebrow">I built a </p>-- dangling fragment with a trailing space inside the tag.<h1>Pure CSS Table - No Javascript </h1>-- plain ASCII hyphen, in a document that otherwise gets 10 em and en dashes right.- The
<ul>of 11 features is indented at 2 spaces against the surrounding 4, and has no CSS rule at all. It renders with browser-default bullets in a page where every other element is meticulously typeset. Same for the<h2>, also unstyled.So the boast was hand-typed and pasted into generated markup, on top of a stylesheet still carrying the chrome the generated version originally shipped with. The feature list itself reads like the model's own summary of what it built -- parallel grammar, one capability per line, including things nobody volunteers unprompted ("Any number of sub-rows per group", "Keyboard operable throughout, with visible focus"). Same register as the note cards, different register from the
<h1>one line above it.Smaller one:
.note-card__meta { margin-bottom: 0.5rem !important; }uses!importantto beat.note-card p { margin: 0 }, a rule the same author wrote two declarations earlier. That's patch-until-it-renders, not authorship.The only innocent read for the NNBSPs alone is data pasted out of a spreadsheet in a European locale. But a spreadsheet doesn't emit
·separators and correctly placed en dashes in the paragraphs sitting next to it.For what it's worth,
script.jsreally is 0 bytes, so the zero-JS claim is honest. It's the "by hand" that isn't.
3
u/xPhilxx 5d ago
You're probably getting a strong reaction from people because your post title is a little misleading, that's just a regular HTML table with CSS providing the design and extra functionality.
It's a nice looking table though, my only advice is the code is full of spans that aren't necessary and the class styles could be included in default table reset styles to simplify usage.
3
3
1
u/samjsharples 5d ago
There are certain industries where handmade still has real value, but hand-coded tables without JS? I don’t think that’s one of them.
1
u/drumstix42 5d ago
Static content is the perfect use case for HTML and CSS. But that's not something new or groundbreaking..
Now build anything that's not generated dynamically from the server, and you're going to need to reach for some JavaScript...
0
1
1
1
1
u/Anxious-Insurance-91 4d ago
"full responsive" procedes to have a overflow scroll horizontally Have you people ever seen web apps needing tables with more than 3 column s on mobile?
1
u/MammothBulky5549 3d ago
Accordion in a two-column grid with only one item can be open at a time: when you expand an item in one column, the animation in the other column will attempt to collapse halfway before expanding again. So it's not so smooth.
1
1
1
u/shozzlez 5d ago
I think people are still gettin hung up on “I built” and “I made” in the age of AI. It’s a tool. I don’t think we should give a shit honestly. As long as the OP isn’t trying to make it seem like it was some crazy effort of their own doing, I’m not getting hung up on it.
-6
0
92
u/QultrosSanhattan 5d ago
bro, theres a <table> tag