Bug 172483 - Empty table cells still occupy space with 'padding: 0' set; affect layout of other content-containing cells
Summary: Empty table cells still occupy space with 'padding: 0' set; affect layout of ...
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Tables (show other bugs)
Version: WebKit Nightly Build
Hardware: Mac macOS 10.12
: P2 Minor
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2017-05-22 18:31 PDT by Kevin
Modified: 2022-08-18 10:02 PDT (History)
6 users (show)

See Also:


Attachments
Example HTML file showcasing table spacing issue. (960 bytes, text/html)
2017-05-22 18:31 PDT, Kevin
no flags Details
Safari 15.6.1 matches with other browsers (379.08 KB, image/png)
2022-08-18 10:02 PDT, Ahmad Saleem
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Kevin 2017-05-22 18:31:37 PDT
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.
Comment 1 Kevin 2017-05-22 18:47:43 PDT
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.
Comment 2 Kevin 2017-06-06 12:05:57 PDT
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).
Comment 3 Ahmad Saleem 2022-08-18 10:02:00 PDT
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!