Can not change top position when use display table-caption html

A drawback of this is that you can't have more than one caption per table, i.e. you can't have two different `tabular`s with two captions side-by-side.

If your table caption are already forced to be below the table (normally they are placed where the \caption macro is used), some part of your thesis, maybe a custom package, might already use float with different settings.

You can also set the table caption position to the top using:

\usepackage[tableposition=top]{caption}

However, this should only influence the vertical skip around the caption. Without this line the caption in your example should be already placed on top, just not with the correct distance.

Finally you can define a \captionabove macro and place this at the begin of the table environment. This macro uses the normal \caption but uses the correct vertical spacing for top-captions (by compensating the spacing added by \caption and adding the correct one).

(It would also be possible to swap the values of the

\usepackage[tableposition=top]{caption}

2 and

\usepackage[tableposition=top]{caption}

3 registers, but this requires grouping which has a negative impact on a

\usepackage[tableposition=top]{caption}

4 which follows.)

I feel that the caption setting and handling will be very different depending on the Table 📦 used in the chunk. I don't think it is like figure which share a common syntax for inclusion and for which knitr handles the insertion when a plot is creation - hence the fig.cap chunk option that you can set in a chunk.

For Table, i see it as a bit different. The Table code is not created by knitr directly - the code is created by the package used in R to print the dataframe during knit process. This is surely why there is no tab.cap chunk option because knitr alone can't know how to insert a table caption for all type of table. Usually caption is set directly in the table function (like kable()) and sometimes it will be differently done depending on the output format (Markdown Table, HTML table, LaTeX table).

And regarding Markdown table, even Pandoc does not allow us to choose where the caption is position I believe:

That is why, from knitr point of view, this FR would concern kable() only - as a chunk option, global or not. knitr alone can't add a chunk option that would work with all type of table you could find. The other package author would have to support this chunk option in there knit print method - which they can already. This is also why this kind of feature is more suited to be inside each extension package that in knitr codebase directly.

Does this clarify my first comment ?

I am happy to discuss any idea you have on this, and also feel free to suggest your ideas as a PR - we'll be happy to review to consider it as part of knitr.

Posted on Oct 5, 2020 • Updated on Oct 7, 2020

Recently I wanted to build a table with double captions, one at the top and one at the bottom.

An HTML Table has a lot of elements that make it up, for example:

thead, defines a set of rows defining the head of the columns of the table. tfoot, defines a set of rows summarizing the columns of the table.

And there is an HTML element to caption a table.

caption specifies the caption (or title) of a table

So I thought, I'll just put two of them and position them with CSS.

   

     first
  
  

     second
  
  

    

      
hello
    
  
  

    

      
world
    
  

The caption element is so convenient that, to position it, there is a CSS rule we can use.

.top {
    caption-side: top; 
}
.bottom {
    caption-side: bottom;
}

top is the initial-value for caption-side.

All set and done, I pushed my changes and prepared to bike home. However on my way down to my bike, I started to check how the solution looked like on the phones I have available. Chromium based (Chrome and Brave) looked alright. Safari, check.

Only Firefox was left, which is usually a very strict browser when it comes to HTML semantics, but I thought, double captions should be fine. However, this solution did not work on Firefox.

Here is a very simplified codepen, open it on Chrome, works fine, but Firefox, does not play along. Or perhaps am I playing foul?

Firefox only renders the first caption tag. The rest of tags, all have size

.top {
    caption-side: top; 
}
.bottom {
    caption-side: bottom;
}

0 and have

.top {
    caption-side: top; 
}
.bottom {
    caption-side: bottom;
}

1 and

.top {
    caption-side: top; 
}
.bottom {
    caption-side: bottom;
}

2, set to

.top {
    caption-side: top; 
}
.bottom {
    caption-side: bottom;
}

3.

A little bizarre behavior is that if you nest a caption within a caption, the browser flattens them in the DOM.

Also if the nested caption has a different caption-side, Chrome respects the CSS declaration.

Chrome Version 85.0.4183.121 Firefox Browser for Developers, version 82.0b6 (64-bit)

I did a few tests on IE 11, using Browserling, and IE is on the rendering many captions side. Though I didn't test nesting captions, I reckon it should work fine.

So who's right?

The , says:

:

As the first element child of a

.top { caption-side: top; } .bottom { caption-side: bottom; }

5 element.

Strictly speaking then, there should not be a possibility to have multiple captions.

The same is stated in the specification.

The gold nugget lies in the , which says:

A element may only contain one element.

So that's the root of the behavior shown by Firefox.

Interestingly enough the also says that one should use the

.top {
    caption-side: top; 
}
.bottom {
    caption-side: bottom;
}

6 tag for

.top {
    caption-side: top; 
}
.bottom {
    caption-side: bottom;
}

5, this use case is and instead the

.top {
    caption-side: top; 
}
.bottom {
    caption-side: bottom;
}

6 tag is used instead with the

.top {
    caption-side: top; 
}
.bottom {
    caption-side: bottom;
}

9 tag.

The [HTML 5 Recommended] specification also refers to the table model, where it states:

In addition to , , , , and , can have a caption element associated with them. This gives the table a heading, or legend.

Again, `thead`1 is the language used. So it makes sense to expect only one caption.

After finding this out, I decided to change my design and markup instead of forcing a workaround.

I think if you really wanted to hack this, you'd have to change the display property of the caption and then try to position your content with transform, but I wouldn't recommend it.

How do you change the position of table caption?

The CSS caption-side property is used to vertically position the table caption box. It can take top and bottom as values. By default, table caption is placed at the top.

How do you add a caption tag to a table in HTML?

The