table:此元素会作为块级表格来显示(类似 <table>
),表格前后带有换行符。
table-row:此元素会作为一个表格行显示(类似 <tr>
)。
table-cell:此元素会作为一个表格单元格显示(类似 <td>
和 <th>
)
上述这些 display 属性值,可以让元素在显示时具有表格、表格行、单元格相关的属性,例如,div 元素,你正常显示几个 div 元素是这样的:
示例代码:
<div style="border: 1px solid red">单元格</div>
<div style="border: 1px solid red">单元格</div>
<div style="border: 1px solid red">单元格</div>
将 div 的显示设置成 table-cell 后,可以按单元格的样式进行显示,如下所示:
示例代码:
<div style="display: table-cell;border: 1px solid red">单元格</div>
<div style="display: table-cell;border: 1px solid red">单元格</div>
<div style="display: table-cell;border: 1px solid red">单元格</div>