CSS Grid Layout & Table Rendering: Interoperability of the 'gap' Property

1. Should the gap property be implemented for table elements?

According to the current CSS Grid Layout spec, the gap property is syntactically allowed on any element, but browsers are not required to apply it to <table>. In Chrome 96+, Firefox 91+, Safari 15+, and Edge 96+, the property is ignored on tables and its computed value is reported as 0px. No vendor has announced a change, and the spec does not mandate implementation. Therefore, you should not rely on gap for table spacing in production.

2. Recommended approach for uniform spacing across grid and table layouts

Use table‑specific spacing mechanisms that work consistently across browsers:

1. Border‑spacing – Set border-collapse: separate; (default) and apply border-spacing: 1rem; on the <table>. This creates space between adjacent cells without affecting cell content.
2. Cell padding/margin – Add padding: 0.5rem; to <td> and <th>. If you need to maintain exact cell widths, adjust box-sizing: border-box;.
3. Wrapper technique – Wrap the table in a container with display: grid; or display: flex; and apply gap: 1rem; to the container. The gap will separate the table from other elements, but not between cells.

For most layouts, border-spacing offers the simplest, most predictable result.

3. Is there a distinct feature for table gaps in the spec?

The CSS Table Layout specification is still evolving. No active proposal exists to add a dedicated gap property for tables, and no vendor has committed to implementing it. If a table‑gap feature is introduced, it would likely appear under the CSS Table Layout spec rather than the Grid spec, and a public implementation timeline is currently undefined.

Diagnostic question

If your design requires collapsed borders (border-collapse: collapse;), border-spacing will have no effect. In that case, consider using cell padding or a wrapper with gap to achieve the desired spacing.