表格布局 (Table)
使用HTML表格或CSS display: table系列属性进行布局。
核心属性
| 属性 | 说明 |
|---|---|
display: table |
表格容器 |
display: table-row |
表格行 |
display: table-cell |
表格单元格（自动等高） |
display: table-header-group |
表头组 |
display: table-footer-group |
表脚组 |
应用场景
适用：数据表格、表单布局、邮件模板、简单的等高列布局
示意图
表头1
表头2
表头3
单元格
单元格
单元格
display: table / table-cell 等高列
实际例子 - 登录表单布局
.form-row {
display: table-row;
}
.label, .input {
display: table-cell;
padding: 12px;
}