©
This document uses PHP Chinese website manual Release
caption-side:top | bottom
默认值:top
适用于:table系元素
继承性:无
动画性:否
计算值:指定值
top:指定caption在表格上边
bottom:指定caption在表格下边
要在IE7及以下浏览器中实现top与bottom参数值的效果,可直接在caption标签内定义标签属性valign为top和bottom。
Firefox还额外支持right和left两个非标准值
对应的脚本特性为captionSide。
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|---|
Basic Support | 6.0-7.0 | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+ |
8.0+ |
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>caption-side_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /> <style> h1{font-size:16px;font-family:Arial;} .test1{caption-side:top;} .test2{caption-side:right;} .test3{caption-side:bottom;} .test4{caption-side:left;} </style> </head> <body> <h1>caption在上边</h1> <table border="1" class="test1"> <caption>caption在上边</caption> <tbody> <tr> <td>这是某一单元格</td> <td>这是某一单元格</td> </tr> <tr> <td>这是某一单元格</td> <td>这是某一单元格</td> </tr> </tbody> </table> <h1>caption在右边</h1> <table border="1" class="test2"> <caption>caption在右边</caption> <tbody> <tr> <td>这是某一单元格</td> <td>这是某一单元格</td> </tr> <tr> <td>这是某一单元格</td> <td>这是某一单元格</td> </tr> </tbody> </table> <h1>caption在下边</h1> <table border="1" class="test3"> <caption>caption在下边</caption> <tbody> <tr> <td>这是某一单元格</td> <td>这是某一单元格</td> </tr> <tr> <td>这是某一单元格</td> <td>这是某一单元格</td> </tr> </tbody> </table> <h1>caption在左边</h1> <table border="1" class="test4"> <caption>caption在左边</caption> <tbody> <tr> <td>这是某一单元格</td> <td>这是某一单元格</td> </tr> <tr> <td>这是某一单元格</td> <td>这是某一单元格</td> </tr> </tbody> </table> </body> </html>
点击 "运行实例" 按钮查看在线实例