Bug 251909 – table element 'overflow:clip' is not applied to nested table elements (thead, tr, td, etc) with a background-color

• Component: CSS
• Status: RESOLVED FIXED

[Pierre Ossman]

Created attachment 464905 [details]
Test case

If a table has "overflow: clip;", then Chrome and Firefox both clip the contents of the table to the shape of the table. This is very useful when you want a table with round corners.

Unfortunately, WebKit does not, giving sharp edges for elements that have a non-transparent background.

Tested using Safari on iOS, and Epiphany on Linux.

[Pierre Ossman]

It is possible to work around this using some ugly CSS like:

tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}

But it quickly becomes ugly when considering variations on <thead>, <tbody> and <tfoot>.

[Karl Dubost]

Created attachment 464917 [details]
safari, firefox, chrome

Rendering in Safari TP, Firefox Nightly, Chrome Canary
latest versions

[Karl Dubost]

Created attachment 464918 [details]
rendering with outlines

putting a yellow outline on the table element
and a red outline on the thead element
we can better see what is happening.

[Radar WebKit Bug Importer]

<rdar://problem/105210397>

[Radar WebKit Bug Importer]

<rdar://problem/105210442>

[Rob Buis]

Pull request: https://github.com/WebKit/WebKit/pull/14078

[EWS]

Committed 264849@main (0e5a15b84122): <https://commits.webkit.org/264849@main>

Reviewed commits have been landed. Closing PR #14078 and removing active labels.

[Thomas Wisniewski [:twisniewski]]

Might the WPT in this patch be pushed to the main repo? It would be nice to have it on wpt.live.

[Rob Buis]

(In reply to Thomas Wisniewski [:twisniewski] from comment #8)
> Might the WPT in this patch be pushed to the main repo? It would be nice to
> have it on wpt.live.

Thanks for the heads up, I forgot to land the test in wpt, should be fixed now.

[Thomas Wisniewski [:twisniewski]]

No worries, thanks!