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.png‎ 137.7 kB

Edited 2 Aug 2020 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:

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):

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.

Regards.

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.