How to style multiple lists like a single table?
Hello no longer "friend and friends" but front-end ones,
How would you go about formatting multiple (unrelated) lists like a table? See the attached example (blue dashed guidelines for better understanding only).
What I'm specifically after is:
1. Displaying lists side by side on widescreen (and sequentially one after another on mobile).
2. All lists having the exact same width.
3. Some elements potentially wrapping on multiple lines.
4. All elements on the same row being "properly aligned" with each other, that is, separator lines not "breaking up" from column to column. Also, displaying the bottom separator even if there's no element (see last row for columns A and C).
5. Lists potentially having a different number of elements each.
I decided against using a
<table> for semantic/accessibility reasons because elements on the "same row" are unrelated. Ideally, I guess I'd want multiple <ul>; however, I wouldn't know how to enforce the 4th constraint listed above.
I considered using a grid, have it auto-place elements by column with grid-auto-flow: column; and ensure each "list" starts at the beginning of a row (grid-row: 1; for the corresponding elements); however, no ul in markup and no control over separator being displayed at the bottom of empty cells.
13 Replies
How good do you need browser support to be? 😅
https://codepen.io/kevinpowell/pen/GRLrwyz
This uses subgrid, which is at ~85% support last I checked
Thanks for the prompt reply @Kevin !
I haven't delved into subgrid because of its supposed actual support; however, I could consider using it if it solved all of my problems.
Above all else, I like very much the idea of being able to keep the proper markup. Next, relying on a single grid template makes everything align nicely (e.g. when a row contains a longer element). Unfortunately, I don't think it can help with the "keeping the separator for empty cells" thing.
In order to highlight both the benefit and the issue, I've made the longer element even longer and I've also removed a couple of elements from the middle list: https://codepen.io/adriteka/pen/mdgRagr
I'm kinda curious about the use case for this. Why not place them side by side?
What do you mean @Joao ? The use case may have got lost on the Codepen examples: the idea is to have separate lists, one per column, each one with its own header (as shown in the original screenshot). There's no relationship between the columns other than being styled like a single table.
It's just that if I see a table I would assume there's some comparison going on, or some type of relationship. By "place them side by side" I mean like a price comparison page or something, but still each element on its own "box". I suppose it's just a matter of style preference?
I understand. Some additional context: in this case, there's no direct comparison between columns, each one just lists examples for a given area. E.g.:
- Data Analyst jobs (column 1): BI Analyst, Financial Analyst, Data Engineer, Statistician
- Programming jobs (column 2): App Developer, Software Architect, Full-Stack Developer
- Research jobs (column 3): User Researcher, Archaeologist, Biomedical Scientist
The look & feel of the whole thing is inspired by the following minimalistic theme: https://fylla-template.webflow.io/
Ah, ok that makes sense. I was imagining something more complicated 😄
here is another way without subgrid, also no need to define amount of rows, but you will need to assign each list to a column (didn't find a way yet to get rid of that as well
https://codepen.io/MarkBoots/pen/YzMNgMB
here the same principle but with nested ul's https://codepen.io/MarkBoots/pen/JjVEVoa
@MarkBoots thank you very much for your solutions (header styling + content and all)! I believe I saw you refer to
display:contents earlier for a split second, which immediately made me start exploring what that property value was all about.
Unfortunately, as far as I understand, Safari support seems to be problematic when it comes to applying it to lists:
https://adrianroselli.com/2022/07/its-mid-2022-and-browsers-mostly-safari-still-break-accessibility-via-display-properties.html#D-Safari
I may be better off taking the subgrid route after all. 😕Adrian Roselli
It’s Mid-2022 and Browsers (Mostly Safari) Still Break Accessibilit...
It was late 2020 when I last tested how browsers use CSS display properties to break the semantics of elements. I had been waiting for Safari to fix how it handles display: contents for four years now, and was excited when the announcement came in June. Then I started testing…
afaik, the
display: contents issues have been solved... but I could double check if needed.@Kevin would you be so kind to double check or maybe even briefly describe how would you go about checking what's supported where? With regard to
display: contents, my reasoning is as follows:
1. It shouldn't affect mobile thanks to simple block stacking in place.
2. May affect behavior on tablets and up, although latest browser versions seem to have trouble with buttons only, not with lists.
3. That being said, it's not unusual to have older iPads (5-6 years old) laying around and users who rely on their default Safari browsers, which cannot be kept up to date, so that'd be a deciding factor.
Maybe worth putting a YouTube short together going over the process you'd normally follow for checking support?