?
本文檔使用 php中文網(wǎng)手冊 發(fā)布
caption-side:top | bottom
默認值:top
適用于:table系元素
繼承性:無
動畫性:否
計算值:指定值
top:指定caption在表格上邊
bottom:指定caption在表格下邊
要在IE7及以下瀏覽器中實現(xiàn)top與bottom參數(shù)值的效果,可直接在caption標簽內(nèi)定義標簽屬性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前端開發(fā)參考手冊系列</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>
點擊 "運行實例" 按鈕查看在線實例