Forum How do I...? a fixed width (table) caption centered on body

Hi again,

This time fiddling with tables. I'm having problems with table captions. I want them to have a fixed width (thus not related to table contents width, so captions may be wider or narrower than the table) and centered in the body.

In Firefox, caption-side: top-outside; solves this, but it is not supported by Prince (nor Chrome, Edge, ...). I can force the width of captions to my desired value, but I was not able to place them centered in the body (albeit the table being itself body centered) when the captions are wider than the table, as seen below.

Can this be achieved in some way?

Thanks & regards.

  1. caption.png137.7 kB

Edited by emece

Hi again,

I`m now wondering if it would make more sense to wrap the entire table inside a <figure> and use its <figcaption> instead. In fact the current HTML spec states that:
The figure element represents some flow content, optionally with a caption, that is self-contained (like a complete sentence) and is typically referenced as a single unit from the main flow of the document.

and I do think of the above table as self-contained content that will be referenced as a single unit from the main flow.

Even more, the HTML5: Edition for Web Authors states about <figure> that (emphasis mine):
The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc, that are referred to from the main content of the document, but that could, without affecting the flow of the document, be moved away from that primary content, e.g. to the side of the page, to dedicated pages, or to an appendix.

and I need the caption to refer to the table from the main flow in case it is placed in another page.

Thus I'm now thinking that placing the table inside a <figure> and using its <figcaption> to assign it a table number, may be semantically more correct that using a bare <table> and its <caption> for such use.

Hi again,

Finally switched to the figure-wrapped table approach. Now with:
figure > figcaption:last-child {
  page-break-before:    avoid;
  counter-increment:    cnt-figure;

figure > figcaption:first-child {
  page-break-after:     avoid;
  counter-increment:    cnt-table;

figure > figcaption:last-child::before {
  content:              "Figure " counter(cnt-figure) ":\00A0";

figure > figcaption:first-child::before {
  content:              "Table " counter(cnt-table) ":\00A0";

the relative placement of <figcaption> and figure content is used to select different counters for figures (<figcaption> after content) and tables (<figcaption> before content) and also to differently format the caption label.

Hope this helps, regards.