Hacker News new | ask | show | jobs
by USiBqidmOOkAqRb 652 days 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.
1 comments
throwaway14356 652 days ago
jep

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.

link
USiBqidmOOkAqRb 649 days ago
Using 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.
link