[css-tables-3] Rendering of multiple captions in an HTML table

[karlcow]

This was initially filed on whatwg/html#10973
but @domenic rightly pointed out that this was more a CSS implementation issue referring to css tables.
I'm just opening and closing to keep a track here.

This is an issue to determine if

1. the specification needs to be clarified or changed
2. to align the browsers on the same behavior.

Currently Firefox shows only one caption while Chrome and Safari show multiple, changing the layout.

Code:

Let's make a table with multiple captions:

<table>
  <caption>caption 1</caption>
  <caption>caption 2</caption>
  <caption>caption 3</caption>
  <tbody>
    <tr>
      <td>body</td>
    </tr>
  </tbody>
</table>

Rendering:

Browser	Rendering
Safari Technology Preview 212 20621.1.10.111.2	all captions shown
Firefox Nightly 136.0a1 13625.1.25	only the first one
Google Chrome Canary 134.0.6985.0 6985.0	all captions shown

Specification:

https://html.spec.whatwg.org/multipage/tables.html#the-caption-element

As the first element child of a table element.

The table element is defined as:
https://html.spec.whatwg.org/multipage/tables.html#the-table-element

In this order:

1. optionally a caption element,
2. followed by zero or more colgroup elements,
3. followed optionally by a thead element,
4. followed by either zero or more tbody elements or one or more tr elements,
5. followed optionally by a tfoot element, optionally intermixed with one or more script-supporting elements.

I wonder if the requirement is one and only caption if it should be clearly mentioned here. The a caption is vague.

Then there is also this section which implies only one.
https://html.spec.whatwg.org/multipage/tables.html#dom-table-caption

The caption IDL attribute must return, on getting, the first caption element child of the table element, if any, or null otherwise.
On setting, the first caption element child of the table element, if any, must be removed, and the new value, if not null, must be inserted as the first node of the table element.

The createCaption() method must return

• the first caption element child of the table element, if any;
• otherwise a new caption element must be table-created, inserted as the first node of the table element, and then returned.

The deleteCaption() method must remove the first caption element child of the table element, if any.

Compatibility

This is a bit of the dark part. It would be good to know, how many tables out there have multiple caption elements with different content. If it's very minor then probably, Safari and Chrome should align to Firefox behavior. If there are a significant number of them, changing the behavior of Chrome/Safari might loose information.

Probably a query could help with that.

WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=286661

CSS Tables Specification

In https://drafts.csswg.org/css-tables-3/#table-structure

Optionally: one or more table caption.

Ok there can be more than one table caption.

https://drafts.csswg.org/css-tables-3/#table-caption

table-caption (equivalent to HTML: )
Specifies a caption for the table. Table captions are positioned between the table margins and its borders.

https://drafts.csswg.org/css-tables-3/#caption-side-property seems to allude that Firefox has a bug related to multiple captions.

Gecko has a bug when dealing with multiple captions. !Testcase

And there is a WPT for it
https://wpt.fyi/results/css/css-tables/caption-side-1.html?label=master&label=experimental&aligned&q=caption