Empty table cells still occupy space with 'padding: 0' set; affect layout of other content-containing cells

• Component: Tables
• Status: RESOLVED CONFIGURATION CHANGED

[Kevin]

Created attachment 310966 [details]
Example HTML file showcasing table spacing issue.

Empty table cells within a table styled with 'padding: 0;' will still take up space in a table. More strangely, they also seem to affect the layout of other content-containing cells.

Example on jsbin: https://output.jsbin.com/cerejesumi

Setting a small fractional padding (e.g. 'padding: 0.01px;') appears to work around this issue.

[Kevin]

Sorry, I was wrong about the fractional padding -- that just causes the empty table cells to (explicitly) occupy 1px in width; when set at 0 it seems like something else happens behind the scenes to draw the table as though these empty cells were 1px in width.

However, the layout of the final cell is not affected when the padding is a small, fractional width.

[Kevin]

One other workaround for this specific scenario -- one could explicitly set 'display: none;' on the empty table cells; e.g.

    td:empty {
        display: none;
    }

This also ensures that empty table cells do indeed occupy zero space.

Of course, this won't work for table cells that contain HTML elements that are otherwise empty + take up zero space (e.g. an empty div).

[Ahmad Saleem]

Created attachment 461714 [details]
Safari 15.6.1 matches with other browsers

I am not able to reproduce the issue with Safari 15.6.1 using attached test case and as can be seen from attached screenshot, all browsers match with each other.

I am going to mark this as "RESOLVED CONFIGURATION CHANGED", please reopen if you think this bug still exist. Thanks!