caption-side
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.
Syntax
/* Directional values */
caption-side: top;
caption-side: bottom;
/* Logical values */
caption-side: block-start;
caption-side: block-end;
caption-side: inline-start;
caption-side: inline-end;
/* Global values */
caption-side: inherit;
caption-side: initial;
caption-side: revert;
caption-side: unset;
The caption-side
property is specified as one of the keyword values listed below.
Values
top
-
The caption box should be positioned above the table.
bottom
-
The caption box should be positioned below the table.
block-start
-
The caption box should be positioned at the block start edge of the table.
block-end
-
The caption box should be positioned at the block end edge of the table.
inline-start
-
The caption box should be positioned at the inline start edge of the table.
inline-end
-
The caption box should be positioned at the inline end edge of the table.
Formal definition
Initial value | top |
---|---|
Applies to | table-caption elements |
Inherited | yes |
Computed value | as specified |
Animation type | discrete |
Formal syntax
Examples
Setting captions above and below
HTML
<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>
CSS
.top caption {
caption-side: top;
}
.bottom caption {
caption-side: bottom;
}
table {
border: 1px solid red;
}
td {
border: 1px solid blue;
}
Result
Specifications
Specification |
---|
CSS Logical Properties and Values Level 1 # caption-side |
Browser compatibility
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
caption-side | ChromeFull support1 | EdgeFull support12 | FirefoxFull support1 | Internet ExplorerFull support8 | OperaFull support4 | SafariFull support1 | WebView AndroidFull support37 | Chrome AndroidFull support18 | Firefox for AndroidFull support4 | Opera AndroidFull support14 | Safari on iOSFull support1 | Samsung InternetFull support1.0 |
Non-standard values left , right , top-outside , and bottom-outside | ChromeNo supportNo | EdgeNo supportNo | FirefoxNo support1 – 87 | Internet ExplorerNo supportNo | OperaNo supportNo | SafariNo supportNo | WebView AndroidNo supportNo | Chrome AndroidNo supportNo | Firefox for AndroidNo support4 – 87 | Opera AndroidNo supportNo | Safari on iOSNo supportNo | Samsung InternetNo supportNo |
top and bottom are relative to the writing-mode value | ChromeNo supportNo | EdgeNo supportNo | FirefoxFull support42 | Internet ExplorerNo supportNo | OperaNo supportNo | SafariNo supportNo | WebView AndroidNo supportNo | Chrome AndroidNo supportNo | Firefox for AndroidFull support42 | Opera AndroidNo supportNo | Safari on iOSNo supportNo | Samsung InternetNo supportNo |
Legend
- Full support
- Full support
- No support
- No support
- Non-standard. Check cross-browser support before using.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.