CSS中居中表格用什么?table { width: 100%; height: 100%; display: table; border-collapse: collapse; border-spa
CSS中居中表格用什么?
table { width: 100%; height: 100%; display: table; border-collapse: collapse; border-spacing: 0; text-align: center; } th,td { border: 1px solid #000; padding: 10px; vertical-align: middle; } tr { display: table-row; } thead { display: table-header-group; } tfoot { display: table-footer-group; } tbody { display: table-row-group; }
以上是使用CSS中居中表格的基本代码。其中,利用display属性,将table、thead、tbody、tfoot、tr以及th、td元素分别设为table、table-header-group、table-row-group、table-footer-group、table-row和table-cell,使表格元素以表格的形式排列。同时,利用text-align属性使表格内容水平居中,padding属性设置单元格内部间距,vertical-align属性设置单元格垂直居中。
需要注意的是,其中的border-collapse属性用来控制表格边框的合并,如果设置为collapse,则边框会合并成一条直线;如果设置为separate,则边框不合并。
总之,使用CSS中的居中表格要注意细节,通过设置相应的属性值,使表格在页面中居中并美观,提高网页设计的质量。
粉丝
0
关注
0
收藏
0