<!-- mobian-agent-page publisher="dailydev" canonical="https://daily.dev/posts/the-frankenstein-table-knu3txtj1" -->

---
title: The Frankenstein Table | daily.dev
description: You can keep an HTML table's semantic markup while laying it out with CSS Grid instead of table display rules. Setting 'table { display: grid; }' is shown as a...
canonical: https://daily.dev/posts/the-frankenstein-table-knu3txtj1
twitter:card: summary_large_image
twitter:site: @dailydotdev
og:type: website
og:site_name: daily.dev
og:title: The Frankenstein Table | daily.dev
og:description: You can keep an HTML table's semantic markup while laying it out with CSS Grid instead of table display rules. Setting 'table { display: grid; }' is shown as a...
og:url: https://daily.dev/posts/the-frankenstein-table-knu3txtj1
og:image: https://api.daily.dev/og/posts/kNu3TxTj1.png
og:image:alt: The Frankenstein Table
og:image:width: 1200
og:image:height: 630
og:locale: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# The Frankenstein Table

**[CSS-Tricks](https://daily.dev/sources/css_tricks)** · 4 min read · 3 upvotes · 1 comments

## Summary

You can keep an HTML table's semantic markup while laying it out with CSS Grid instead of table display rules. Setting 'table { display: grid; }' is shown as a snippet, and grid properties like grid-template-columns are applied to a card table. To strip table-specific layout quirks, set 'tbody { display: contents; }' and 'tr, tr > * { display: block; }'. The author argues this hybrid keeps the pseudo-semantic benefit of '<th>' and '<td>' over generic divs, while gaining grid's layout power. The author says VoiceOver and keyboard navigation work as if it's a real table.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://css-tricks.com/the-frankenstein-table>

## Questions this post answers

### how do I make an HTML table use CSS Grid for layout instead of default table display

Set 'display: grid' on the table element itself, then override the row-level table display behavior. Add 'tbody { display: contents; }' to bypass the tbody in layout, and 'tr, tr > * { display: block; }' on rows and cells to avoid default table-row and table-cell styles interfering with the grid.

_Developers mixing table semantics with modern CSS layout can find more patterns like this on daily.dev._

### does using display:grid on a table element break accessibility or screen reader support

No, testing showed VoiceOver and keyboard navigation still work as expected, treating it as a real table despite the CSS Grid display override. Browsers have not rejected this approach, and the table's semantic role, such as its ARIA role, remains unaffected by the display change.

_Anyone weighing accessibility trade-offs in layout choices can track findings like this on daily.dev._

## Community discussion

Top comments from developers on daily.dev.

**@nthadam** · 1 upvotes

> Bold and daring ideas. I've waffled on key/value semantics for a while and was remiss to discover tables with `th` and `td` may be best. It _does_ make sense though. I like the idea of controlling tables with grids though. That's cool.

## Similar posts on daily.dev

- [Accessible \(I Think\) Split-Cell Table Headers](https://daily.dev/posts/accessible-i-think-split-cell-table-headers-pimkau8of) · Eric Meyer — meyerweb.com · 0 upvotes · 0 comments
- [My CSS layout strategy](https://daily.dev/posts/my-css-layout-strategy-lfp48ynra) · Blogging and all that Malarkey · 49 upvotes · 2 comments
- [Get Grid Information using pure CSS](https://daily.dev/posts/get-grid-information-using-pure-css-pfehfxsxb) · CSS Tip · 33 upvotes · 3 comments
- [CSS Subgrid](https://daily.dev/posts/css-subgrid-tzegbceau) · Flavio Copes · 4 upvotes · 0 comments

---

Tags: [#css](https://daily.dev/tags/css), [#html](https://daily.dev/tags/html), [#accessibility](https://daily.dev/tags/accessibility)

[View this post on daily.dev](https://daily.dev/posts/the-frankenstein-table-knu3txtj1)

```json
{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]}
{"@context":"https://schema.org","@type":"TechArticle","headline":"The Frankenstein Table","url":"https://daily.dev/posts/the-frankenstein-table-knu3txtj1","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/the-frankenstein-table-knu3txtj1"},"datePublished":"2026-10-29T13:50:12.745Z","dateModified":"2026-10-29T13:50:53.349Z","description":"You can keep an HTML table's semantic markup while laying it out with CSS Grid instead of table display rules. Setting 'table { display: grid; }' is shown as a...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/c73bf2f24cb0552841c7165da6938ead?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/c73bf2f24cb0552841c7165da6938ead?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"CSS-Tricks","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"CSS-Tricks","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/css_tricks","url":"https://daily.dev/sources/css_tricks"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/the-frankenstein-table-knu3txtj1","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"css,html,accessibility","timeRequired":"PT4M"}
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"CSS-Tricks","item":"https://daily.dev/sources/css_tricks"},{"@type":"ListItem","position":3,"name":"The Frankenstein Table"}]}
{"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/the-frankenstein-table-knu3txtj1","comment":[{"@type":"Comment","text":"Bold and daring ideas. I’ve waffled on key/value semantics for a while and was remiss to discover tables with th and td may be best. It does make sense though. I like the idea of controlling tables with grids though. That’s cool.","datePublished":"2026-10-30T12:21:38.169Z","url":"https://daily.dev/posts/kNu3TxTj1#c-ecZxlEGV1","author":{"@type":"Person","name":"Adam Leis","url":"https://daily.dev/nthadam","image":"https://lh3.googleusercontent.com/a/ACg8ocKmBiFBNwyPmFKXkvqjKLyqClpM8dijiZl9zCT2dhJeMoZfxbUs=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}]}
{"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/the-frankenstein-table-knu3txtj1#faq","mainEntity":[{"@type":"Question","name":"how do I make an HTML table use CSS Grid for layout instead of default table display","acceptedAnswer":{"@type":"Answer","text":"Set 'display: grid' on the table element itself, then override the row-level table display behavior. Add 'tbody { display: contents; }' to bypass the tbody in layout, and 'tr, tr \u003e * { display: block; }' on rows and cells to avoid default table-row and table-cell styles interfering with the grid. Developers mixing table semantics with modern CSS layout can find more patterns like this on daily.dev."}},{"@type":"Question","name":"does using display:grid on a table element break accessibility or screen reader support","acceptedAnswer":{"@type":"Answer","text":"No, testing showed VoiceOver and keyboard navigation still work as expected, treating it as a real table despite the CSS Grid display override. Browsers have not rejected this approach, and the table's semantic role, such as its ARIA role, remains unaffected by the display change. Anyone weighing accessibility trade-offs in layout choices can track findings like this on daily.dev."}}]}
```