🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# CSS caption-side 属性 ## 实例 规定表格标题的放置方式: ``` caption { caption-side:bottom; } ``` ## 浏览器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | 所有浏览器都支持 caption-side 属性。 注释:如果已规定 !DOCTYPE,那么 Internet Explorer 8 (以及更高版本)支持 caption-side 属性。 ## 定义和用法 caption-side 属性设置表格标题的位置。 ### 说明 该属性指定了表标题相对于表框的放置位置。表标题显示为好像它是表之前(或之后)的一个块级元素。 | 默认值: | top | | --- | --- | | 继承性: | yes | | --- | --- | | 版本: | CSS2 | | --- | --- | | JavaScript 语法: | _object_.style.captionSide="bottom" | | --- | --- | ## 可能的值 | 值 | 描述 | | --- | --- | | top | 默认值。把表格标题定位在表格之上。 | | bottom | 把表格标题定位在表格之下。 | | inherit | 规定应该从父元素继承 caption-side 属性的值。 | ## TIY 实例 [设置表格标题的位置](/tiy/t.asp?f=csse_table_caption-side) 本例演示如何定位表格的标题。 ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> caption { caption-side:bottom } </style> </head> <body> <table border="1"> <caption>This is a caption</caption> <tr> <td>Adams</td> <td>John</td> </tr> <tr> <td>Bush</td> <td>George</td> </tr> </table> <p><b>注释:</b>如果已规定 !DOCTYPE,那么 Internet Explorer 8 (以及更高版本)支持 caption-side 属性。</p> </body> </html> ``` ## 相关页面 CSS 教程:[CSS 表格](/css/css_table.asp "CSS 表格") HTML DOM 参考手册:[captionSide 属性](/jsref/prop_style_captionside.asp "HTML DOM captionSide 属性")