• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • caption-side

    CSS 中 caption-side 属性会将表格的标题<caption>放到规定的位置。但是具体显示的位置与表格的writing-mode属性值有关。

    示例

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

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE8以上版本的浏览器都支持caption-side

    语法:

    caption-sidetop| bottom

    取值

    • top:标题会出现在表格的上方。
    • bottom:标题会出现在表格的下方。
    • left:标题会出现在表格的左边。在CSS 2阶段,这个值被建议加入到中,但是在在最终的CSS 2.1中被移除。它是非标准属性。
    • right:标题会出现在表格的右边。在CSS 2阶段,这个值被建议加入到中,但是在在最终的CSS 2.1中被移除。它是非标准属性。
    • top-outside:标题会被放置在表格上方,但是标题的宽度和水平对齐方式不受表格水平布局的约束。在CSS 2.1中提到:CSS 2中对top值产生的效果有不同的定义,在未来可能会重新定义这个值产生的影响效果。
    • bottom-outside标题:会被放置在表格下方,但是标题的宽度和水平对齐方式不受表格水平布局的约束。在CSS 2.1中提到:CSS 2中对top值产生的效果有不同的定义,在未来可能会重新定义这个值产生的影响效果。

    说明:

    设置或检索表格的caption对象是在表格的那一边。

    • 要在IE7及以下浏览器中实现 top 与 bottom 参数值的效果,可直接在<caption>标签内定义标签属性valign为 top 和 bottom。
    • Firefox还额外支持 right 和 left 两个非标准值
    • 对应的脚本特性为captionSide
    默认值top
    适用于table系元素
    继承性
    动画性
    计算值指定值

    例子

    //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;
    }
    

    上篇:border-spacing

    下篇:empty-cells