本文摘自PHP中文网,作者青灯夜游,侵删。
caption-side属性用来设置表格标题的位置,可以设置表格标题是位于表格的上面,还是下面。CSS caption-side属性
作用:caption-side属性设置表格标题的位置。
语法:
1 | caption-side : top | bottom ;
|
参数:
top:默认值,把表格标题定位在表格之上。
bottom:把表格标题定位在表格之下。
说明:所有主流浏览器都支持caption-side属性;但IE8只有指定!DOCTYPE才支持caption-side属性。
CSS caption-side属性的使用示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | <!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" >
< style >
td{
padding:10px 20px;
}
#example1 {
caption-side: bottom;
}
#example2 {
caption-side: top;
}
</ style >
</ head >
< body >
< h2 >caption-side: bottom:</ h2 >
< table id = "example1" border = "1" >
< caption >标题</ caption >
< tr >
< td >测试文本</ td >
< td >测试文本</ td >
< td >测试文本</ td >
</ tr >
< tr >
< td >测试文本</ td >
< td >测试文本</ td >
< td >测试文本</ td >
</ tr >< tr >
< td >测试文本</ td >
< td >测试文本</ td >
< td >测试文本</ td >
</ tr >< tr >
< td >测试文本</ td >
< td >测试文本</ td >
< td >测试文本</ td >
</ tr >< tr >
< td >测试文本</ td >
< td >测试文本</ td >
< td >测试文本</ td >
</ tr >
</ table >
< h2 >caption-side: top (默认值):</ h2 >
< table id = "example2" border = "1" >
< caption >标题2</ caption >
< tr >
< td >测试文本</ td >
< td >测试文本</ td >
< td >测试文本</ td >
</ tr >
< tr >
< td >测试文本</ td >
< td >测试文本</ td >
< td >测试文本</ td >
</ tr >< tr >
< td >测试文本</ td >
< td >测试文本</ td >
< td >测试文本</ td >
</ tr >< tr >
< td >测试文本</ td >
< td >测试文本</ td >
< td >测试文本</ td >
</ tr >< tr >
< td >测试文本</ td >
< td >测试文本</ td >
< td >测试文本</ td >
</ tr >
</ table >
</ body >
</ html >
|
效果图:
以上就是caption-side属性怎么用的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css 实现背景动态渐变效果
css实现文本图标对齐的方法
css中resize什么意思
html和css给文字添加删除线的三种方法(图文)
css怎么嵌入到html中?
css中如何给字体加描边
css怎么实现图片居中
css如何让字体下沉
css outline属性怎么用?
css怎么调整行距
更多相关阅读请进入《caption-side属性》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » caption-side属性怎么用