Bug 14309 – Table captions have incorrect width when the table has vertical borders

• Status: NEW
• Component: Tables

The attached test case shows that the width of the caption is wrong when it computes to 'auto' or '100%' and the table has vertical borders.

Created attachment 15179 [details]
Test case

In the "100%" cases, Firefox might be trying to follow this sentence from CSS2.1 17.4: "Percentages on 'width' on the table are relative to the anonymous box's containing block, not the anonymous box itself", as it makes the caption as wide as the body.

[Keith Winkler]

The caption width is also wrong (by 5px or so) when the table has any horizontal padding at all--even if the caption is given the same padding.

[Keith Winkler]

Created attachment 21122 [details]
Caption width off by several pixesl when table has padding.

Created attachment showing caption width off by several pixel.

[Jesse]

Created attachment 21258 [details]
Percentage width Caption bug. 

percentage based width of the caption is using the table as the container not the element containing the table. In this example I have set the table width to 50% and the caption width to 50%. This is showing the caption at 50% of the table width (25% of the page width). Where in all other browsers it is showing the caption and the table at 50% of the page. Indicating that the caption should be contained by the page not the table. Can anyone confirm the W3 recommendation on this?

[Murray Nuttall]

Created attachment 86373 [details]
Caption not displaying at 100% of table

I am having this issue with Windows 7 64-bit using either Chrome or Safari.

[Matteo Settenvini]

Is bug #38358 a dupe of this?
Bug present also on GNU/Linux with latest Epiphany and Google Chrome.

[Ahmad Saleem]

Created attachment 460384 [details]
Safari 15.5 matches with Chrome but differs from Firefox

Based on attached test case in Comment 01, Safari 15.5 matches with Chrome Canary 105 but differs from Firefox Nightly 103 as shown in the attached screenshot.

NOTE - Firefox Screenshot is cut half but the "red" box extend beyond visual viewport.

I am not clear on expected behavior and which browser is behaving right but appreciate if someone can have a look and update in quick summary on what is expected behavior inline with web-spec. Thanks!