關于表格布局display:table-cell的妙用
對于表格布局,雖然目前css3有:Flex布局丶 Grid布局可用 但是這兩個存在相容問題
1.display:table屬性的作用
- 主要還是為了解決一部分需要使用表格特性,但又不需要表格語義的情況,
- 而且table的嵌套性太多，非表格内容用table來裝，不符合标簽語義化
2.display:table的一些屬性
display:table中的屬性
- 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>）此元素會作為一個表格标題顯示。
3.div模拟表格
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>display:table</title>
</head>
<body>
<style>
.table {
display: table;
margin: 5px;
width: 500px;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
padding: 10px;
background-color: skyblue;
border: 1px solid #000;
}
</style>
<div class="table">
<div class="row">
<div class="cell">内容一</div>
<div class="cell">内容二</div>
<div class="cell">内容三</div>
</div>
</div>
</body>
</html>
效果:
特點:浮動至同一橫軸，同一行清單元素等高。适用于等高布局 (實作table表格顯示效果)
例如: bootstrap中的表單實作的效果:
效果:
4.小結
- 隻需要将容器設為display:table然他成為一個塊級表格元素，子元素display:table-cell使子元素成為表格單元格，然後就像在表格裡一樣,較正常方式整潔
- 還可實作響應式布局丶自動填滿剩餘空間丶動态垂直/水準居中對齊;