CODEWITHSUNDEEP
htmlcss
David Pratt
David Pratt

Reputation: 723

Is it possible in HTML & CSS alone to align a table caption to the top AND bottom of the table?

The CSS property caption-side allows you to align the <caption> element to either the top or bottom of a table: https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side

How can I set the caption to appear on both the top and bottom? This could be useful for larger tables.

Ideally I would like to avoid putting a <p> tag or similar above the table and effectively duplicating the caption mark-up.

Upvotes: 1

Views: 579

Answers (3)

Yvonne Aburrow
Yvonne Aburrow

Reputation: 2728

table:after {
   content: attr(title);
   background-color: #333;
   color: #fff;
}

table:before {
   content: attr(title);
   background-color: #333;
   color: #fff;
}
<table title="O caption, my caption!">
  <tr>
   <td><a href="https://css-tricks.com/css-content/">CSS Tricks</a></td>
   <td>some text</td>
 </tr>
</table>

Not quite what you asked for, as there is now no <caption> element. But the caption text only appears once in the code.

Upvotes: 1

BoltClock
BoltClock

Reputation: 724372

This is not possible with just HTML and CSS without duplicating the caption content.

Depending on your use case, you want either the caption (along with the table header and/or footer) to remain visible when scrolling, the caption to appear at the bottom of a table large enough for the caption to disappear from the top, or the caption to always appear twice. The first two require JavaScript (and especially in the case of the former some pretty heavy DOM and layout manipulation), and the third is only possible by duplicating the caption content (with JavaScript if you prefer not to pollute your markup) and putting the duplicate outside of the table, because Firefox is unable to render more than one table-caption per table due to a bug.

Upvotes: 1

user6268517
user6268517

Reputation:

add in your HTML file:

<p id="lblCaption">YOUR CAPTION HERE</p>

add in your CSS file:

#lblCaption { position: fixed; }

Upvotes: 0

Related Questions