caption-side

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Thuộc tính caption-side trong CSS đặt nội dung của phần tử <caption> trong bảng vào phía được chỉ định. Các giá trị có liên quan đến writing-mode của bảng.

Try it

caption-side: top;

caption-side: bottom;

<section class="default-example" id="default-example">
  <table class="transition-all" id="example-element">
    <caption>
      Famous animals
    </caption>
    <tbody>
      <tr>
        <th>Name</th>
        <th>Location</th>
      </tr>
      <tr>
        <td>Giraffe</td>
        <td>Africa</td>
      </tr>
      <tr>
        <td>Penguin</td>
        <td>Antarctica</td>
      </tr>
      <tr>
        <td>Sloth</td>
        <td>South America</td>
      </tr>
      <tr>
        <td>Tiger</td>
        <td>Asia</td>
      </tr>
    </tbody>
  </table>
</section>

table {
  font-size: 1.2rem;
  text-align: left;
  color: black;
}

th,
td {
  padding: 0.2rem 1rem;
}

caption {
  background: #ffcc33;
  padding: 0.5rem 1rem;
}

tr {
  background: #eeeeee;
}

tr:nth-child(even) {
  background: #cccccc;
}

Cú pháp

css

/* Giá trị theo hướng */
caption-side: top;
caption-side: bottom;

/* Giá trị toàn cục */
caption-side: inherit;
caption-side: initial;
caption-side: revert;
caption-side: revert-layer;
caption-side: unset;

Thuộc tính caption-side được chỉ định bằng một trong các giá trị từ khóa liệt kê dưới đây.

Giá trị

top: Hộp caption nên được đặt ở phía đầu khối của bảng.
bottom: Hộp caption nên được đặt ở phía cuối khối của bảng.

Note: Mô-đun thuộc tính và giá trị logic CSS định nghĩa hai giá trị logic, inline-start và inline-end, để đặt hộp caption ở cạnh đầu inline và cạnh cuối inline của bảng tương ứng. Các giá trị này hiện không được bất kỳ trình duyệt nào hỗ trợ.

Định nghĩa hình thức

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

Cú pháp hình thức

caption-side = 
  top     |
  bottom

Ví dụ

Đặt caption ở trên và dưới bảng

HTML

html

<table class="top">
  <caption>
    Caption ABOVE the table
  </caption>
  <tbody>
    <tr>
      <td>Some data</td>
      <td>Some more data</td>
    </tr>
  </tbody>
</table>

<br />

<table class="bottom">
  <caption>
    Caption BELOW the table
  </caption>
  <tbody>
    <tr>
      <td>Some data</td>
      <td>Some more data</td>
    </tr>
  </tbody>
</table>

CSS

css

.top caption {
  caption-side: top;
}

.bottom caption {
  caption-side: bottom;
}

table {
  border: 1px solid red;
}

td {
  border: 1px solid blue;
}

Kết quả

Đặc tả

Specification
Cascading Style Sheets Level 2 # propdef-caption-side
CSS Logical Properties and Values Module Level 1 # caption-side

Tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content