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.

Thanks that was helpful.

I had a similar issue with narrow tables and long captions. I was able to make the caption wider than the table by using negative left and right margins. But as I had over a hundred tables your suggestion is more universal. I did not want to have to have different margins for each table in my css.