css3中的display: table


今天看到一条属性display: table; 可以在div等标签中实现表格效果;


display: table=>相当于“table”标签;

display: table-row=>相当于“tr”标签;

display: table-cell=>相当于“td”标签


一.父元素宽度固定,让子元素平分宽度,用普通的方法设置%的时候是很烦的

  这里使用display: table;表格属性来解决:

.parent{display: table;width: 800px;}

.son{display: table-cell;

  

二.块级子元素垂直居中

.parent{display: table;width: 800px;}

.son{display: table-cell;}

三.display:table使用时应注意的一些问题

  1.display: table时 对应元素的padding会失效;

  2.display: table-row时 对应元素的padding、margin会失效;

  3..display: table-cell时 对应元素的margin会失效;

  4.displaty: table-cell不要与float,position: absolute;等改变布局的属性同时使用,作用会被破坏

四.display:table;其他值

  1.table 此元素会作为块级表单显示=》

  2.table-row-group 此元素会作为一个或多个行的分组显示=》tbody

  3.table-heightder-group 此元素会作为一个或多个行的分组显示=》thead

  3.table-footer-grounp 此元素会作为一个或多个行的分组显示=》tfoot

  4.table-column-grounp 此元素会作为一个或多个列的分组显示=》colgroup

  5.table-column 此元素会作为一个单元格列显示=>col

  6.table-caption 此元素会作为一个表格标题显示=》caption

具体请参考张旭鑫老师的http://www.zhangxinxu.com/wordpress/2010/10/%E6%88%91%E6%89%80%E7%9F%A5%E9%81%93%E7%9A%84%E5%87%A0%E7%A7%8Ddisplaytable-cell%E7%9A%84%E5%BA%94%E7%94%A8/
posted @ 2018-07-10 17:43  渔小白  阅读( 5070)  评论( 0编辑  收藏
,表格前后带有换行符


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM