14、display:table
一、display: table 的核心特性
参考答案
DETAILS
作用：让元素以表格形式渲染，模拟传统 HTML 表格的结构（类似 <table>、<tr>、<td>），但不依赖实际表格标签。
相关属性：
.container {
display: table;
} /* 类比 <table> */
.row {
display: table-row;
} /* 类比 <tr> */
.cell {
display: table-cell;
} /* 类比 <td> */
.caption {
display: table-caption;
} /* 类比 <caption> */
二、display: table 的应用场景
参考答案
DETAILS
等高布局：多列内容高度自适应保持一致。
垂直居中：结合
vertical-align: middle实现简单垂直居中。替代传统表格标签：在需要表格结构但不想用
<table>时保持语义灵活。旧浏览器兼容：在 Flexbox/Grid 不支持的旧环境中实现复杂布局。
三、如何用 display: table 实现三栏等高布局？
参考答案
DETAILS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
display: table;
width: 100%;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
vertical-align: top;
/* 控制内容对齐方式 */
}
.left,
.right {
width: 100px;
}
/* 固定宽度 */
.middle {
width: auto;
}
/* 自适应 */
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="cell left">左侧（宽度固定）</div>
<div class="cell middle">中间（自适应宽度）</div>
<div class="cell right">右侧（宽度固定）</div>
</div>
</div>
</body>
</html>
四、display: table 与 <table> 标签有什么区别？
参考答案
DETAILS
语义性：
<table>标签用于展示表格数据，具有语义化；display: table仅改变渲染方式，无语义关联。灵活性：
display: table可以应用于任意元素，更灵活。可访问性：
<table>对屏幕阅读器更友好，display: table需额外 ARIA 标记提升可访问性。
五、为什么现代开发中较少使用 display: table？
参考答案
DETAILS
Flexbox 和 Grid 的普及：现代布局方案（Flexbox/Grid）更灵活、语义更清晰，且支持响应式设计。
性能与复杂度：display: table 在多层嵌套时可能导致渲染性能下降，代码可读性较差。
功能限制：无法直接实现动态伸缩、复杂对齐等高级布局需求。