标题端 | caption-side (Miscellaneous Level 2) - CSS 中文开发手册 - Break易站


  • ??CSS 中文开发手册

    标题端 | caption-side (Miscellaneous Level 2) - CSS 中文开发手册

    caption-side

    该caption-side CSS属性,将一个表的内容<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;

    Initial value

    top

    应用对象

    table-caption elements

    是否可继承

    yes

    媒体

    visual

    计算值

    as specified

    动画类型

    discrete

    规范顺序

    the unique non-ambiguous order defined by the formal grammar

    语法

    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规范描述了bottom值,该值将由该值在未来的规范中重新引入。

    inherit

    caption-side必须使用在父元素上定义的值。

    形式语法

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

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

    结果

    规范

    Specification

    Status

    Comment

    CSS Logical Properties Level 1The 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.

    浏览器兼容性

    Feature

    Chrome

    Edge

    Firefox

    Internet Explorer

    Opera

    Safari

    Basic support

    1.0

    (Yes)

    1.0

    8.0

    4.0

    1.0

    left, right, top-outside and bottom-outside

    No support

    No support

    (Yes)

    No support

    No support

    No support

    top and bottom are relative to the writing-mode value

    No support

    No support

    42 (42)

    No support

    No support

    No support

    Feature

    Android

    Edge

    Firefox Mobile (Gecko)

    IE Phone

    Opera Mobile

    Safari Mobile

    Basic support

    (Yes)

    (Yes)

    ?

    ?

    ?

    (Yes)

    left, right, top-outside and bottom-outside

    No support

    No support

    ?

    No support

    No support

    No support

    top and bottom are relative to the writing-mode value

    No support

    No support

    42.0 (42)

    No support

    No support

    No support

    
    
  • ??CSS 中文开发手册
  • 转载请保留页面地址:https://www.breakyizhan.com/css/32067.html

    标题端 | caption-side (Miscellaneous Level 2) - CSS 中文开发手册 - Break易站

    上一篇:格列隙 | grid-column-gap (Grid Layout) - CSS 中文开发手册 - Break易站


    下一篇:Android Studio教程06-布局,监听器以及基本控件