Hacker News Reader

Comment by USiBqidmOOkAqRb | Hacker News Reader

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.

View on HN

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.

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.

Reply on news.ycombinator.com