The caption-side
CSS property puts the content of a table's <caption>
on the specified side. The values are relative to the writing-mode
of the table.
/* Directional values */ caption-side: top; caption-side: bottom; /* Warning: non-standard values */ caption-side: left; caption-side: right; caption-side: top-outside; caption-side: bottom-outside; /* Global values */ caption-side: inherit; caption-side: initial; caption-side: unset;
The caption-side
property is specified as one of the keyword values listed below.
top
bottom
left
right
top-outside
top
value, which will be reintroduced by this value in a future specification.bottom-outside
bottom
value, which will be reintroduced by this value in a future specification.top | bottom | block-start | block-end | inline-start | inline-end
<table class="top"> <caption>Caption ABOVE the table</caption> <tr> <td>Some data</td> <td>Some more data</td> </tr> </table> <br> <table class="bottom"> <caption>Caption BELOW the table</caption> <tr> <td>Some data</td> <td>Some more data</td> </tr> </table>
.top caption { caption-side: top; } .bottom caption { caption-side: bottom; } table { border: 1px solid red; } td { border: 1px solid blue; }
Specification | Status | Comment |
---|---|---|
CSS Logical Properties and Values Level 1 The definition of 'caption-side' in that specification. | Editor's Draft | Defines the top and bottom values as relative to the writing-mode value. |
CSS Level 2 (Revision 1) The definition of 'caption-side' in that specification. | Recommendation | Initial definition. |
Initial value | top |
---|---|
Applies to | table-caption elements |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1 | 12 | 1 | 8 | 4 | 1 |
Non-standard values left , right , top-outside , and bottom-outside
|
No | No | Yes | No | No | No |
top and bottom are relative to the writing-mode value
|
No | No | 42 | No | No | No |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | Yes | ? | Yes | 4 | ? | Yes | ? |
Non-standard values left , right , top-outside , and bottom-outside
|
No | ? | No | Yes | No | No | No |
top and bottom are relative to the writing-mode value
|
No | ? | No | 42 | No | No | No |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side