3 ms·
Not mentioned: display: table; display: table-row-group; display: table-header-group; display: table-footer-group; display: table-row;
by USiBqidmOOkAqRb 2y ago
Not mentioned:
display: table;
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
I'm not sure how cursed this is for screen readers. It certainly feels less evil than JS solutions.
- deleted 2y ago[deleted]
- throwaway14356 2y agojep https://developer.mozilla.org/en-US/docs/Web/CSS/display https://developer.mozilla.org/en-US/docs/Web/CSS/display the topic ads one more top search result than fails to provide the solution. I didn't find a page that does but didn't look very hard. Tables resize in a pretty clever way. I wonder if css has anything that forces one element to resize along with another. Probably not.
- USiBqidmOOkAqRb 2y agoUsing inspector I threw together some divs and styled them using the aforementioned CSS property values and it definitely works. Columns work, and it even responds to table-layout: fixed! You only lose the ability to use rowspan/colspan attributes but that's about it. I was thinking about posting it but checked ARIA recommendations to figure out what additional attributes would be appropriate. It strongly recommends against switching interactive elements (a link) to non interactive (grid row). For example, this doesn't validate: <!DOCTYPE html> <html lang=""> <head> <title>Test</title> </head> <body> <div role=grid><div role=rowgroup><a href=#frag role=row>test</a></div></div> </body> </html> I'd be inclined to agree, just leave links inside of table cells.