当前位置：文江博客知识库 en-US 文档 Web CSS caption-side

caption-side - CSS: Cascading Style Sheets 编辑

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;

/* 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.

Values

top: The caption box should be positioned above the table.
bottom: The caption box should be positioned below the table.
left: The caption box should be positioned on the left side of the table.; This value was proposed for CSS 2, but removed from the final CSS 2.1 specification. It is non-standard.
right: The caption box should be positioned on the right side of the table.; This value was proposed for CSS 2, but removed from the final CSS 2.1 specification. It is non-standard.
top-outside: The caption box should be positioned above the table, while the width and horizontal alignment behavior are not bound to the table's horizontal layout.; The CSS 2.1 specification notes that the CSS 2 specification described a different behavior for the top value, which will be reintroduced by this value in a future specification.
bottom-outside: The caption box should be positioned below the table, while the width and horizontal alignment behavior are not bound to the table's horizontal layout.; The CSS 2.1 specification notes that the CSS 2 specification described a different behavior for the bottom value, which will be reintroduced by this value in a future specification.

Formal definition

Initial value	`top`
Applies to	table-caption elements
Inherited	yes
Computed value	as specified
Animation type	discrete

Formal syntax

top | bottom | block-start | block-end | inline-start | inline-end

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	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.