CSS caption-side 属性

caption-side CSS 属性规定表格标题（<caption> 元素）的位置。默认情况下，表格标题位于表格顶部（caption-side: top），但可以通过设置该属性来改变其位置。

语法

caption-side: top | bottom | inherit;

• top：表格标题位于表格顶部。
• bottom：表格标题位于表格底部。
• inherit：继承父元素的 caption-side 属性值。

使用方法

table {
  caption-side: top;
}

table {
  caption-side: bottom;
}

示例

// www.javascriptcn.com code example
<table>
  <caption>这是一个表格标题</caption>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>20</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>22</td>
  </tr>
</table>

在上面的示例中，我们可以通过设置 caption-side 属性来决定表格标题的位置，从而使表格更加美观和易于阅读。

总结

在使用 caption-side 属性时，我们可以根据实际需求调整表格标题的位置，以提高表格的可读性和美观性。通过灵活运用该属性，我们可以更好地控制表格的布局和样式。