表格布局 display:table
display:table已经基本取代table元素,主要原因为
table必须在页面完全加载后才显示,而div是逐行显示
非表格内容用table来装,不符合标签语义化要求,不利于SEO
table的嵌套性太多,用DIV代码会比较简洁
table (类似 <table>)此元素会作为块级表格来显示,表格前后带有换行符。
inline-table (类似 <table>)此元素会作为内联表格来显示,表格前后没有换行符。
table-row-group (类似 <tbody>)此元素会作为一个或多个行的分组来显示。
table-header-group (类似 <thead>)此元素会作为一个或多个行的分组来显示。
table-footer-group (类似 <tfoot>)此元素会作为一个或多个行的分组来显示。
table-row (类似 <tr>)此元素会作为一个表格行显示。
table-column-group (类似 <colgroup>)此元素会作为一个或多个列的分组来显示。
table-column (类似 <col>)此元素会作为一个单元格列显示。
table-cell (类似 <td> 和 <th>)此元素会作为一个表格单元格显示。
table-caption (类似 <caption>)此元素会作为一个表格标题显示。
匿名表格元素创建规则
和表格元素一样,具有表格样式的元素当不存在符合要求的父元素时,那些“丢失”的元素会被模拟出来,使其符合table/inline-table、table-row、table-cell的三层嵌套关系。
<style> .table { display: table; border: 1px solid #cccccc; margin: 5px; } .row { display: table-row; border: 1px solid #cccccc; } .cell { display: table-cell; border: 1px solid #cccccc; padding: 5px; }</style>
<div class="table"> <div class="row"> <div class="cell">张三</div> <div class="cell">李四</div> <div class="cell">王五</div> </div> <div class="row"> <div class="cell">张三</div> <div class="cell">李四</div> <div class="cell">王五</div> </div></div>
一些特殊影响
display: table时padding会失效
display: table-row时margin、padding同时失效
display: table-cell时margin会失效
display: table-cell中的块级元素可以受到vertical-align影响
其他属性
设为display:table或display:inline-table的元素还具有如下属性
table-layout
automatic:时每列宽度由该列内最宽的一格决定
fixed:时每列宽度固定为表格总宽/列数border-collapse
collapse:合并边框
separate:分离边框(此时可用border-spacing设置边框距离)