display: table 和 table-cell 可使元素表现如表格，实现等高列布局；通过将父容器设为 display: table，子元素设为 display: table-cell，可让各列自动等高并横向排列，适用于旧浏览器兼容或无需Flexbox/Grid的场景。该方法支持垂直对齐和均匀填充，但缺乏现代布局的灵活性，且不利于语义化与维护，建议仅在特定情况下使用。
在CSS中，利用 display: table 和 display: table-cell 可以创建类似HTML表格的布局效果，而无需使用实际的 CSS 的 display 属性允许元素表现得像表格结构中的不同部分： 这些值不会改变HTML语义，但能实现视觉上的表格布局，适合构建灵活的UI组件。 使用 display: table 和 table-cell 最大的优势是所有“单元格”自动等高，内容最多的列决定整体高度。 立即学习“前端免费学习笔记（深入）”； 上面代码中，两个 艺帆集团公司企业网站源码基于艺帆企业cms制作，全站div+css 制作；它包含了单页设置、单页分类设置、新闻、产品、下载、在线招聘、在线留言、幻灯管理、友情链接管理和数据库备份等功能。 DIV+CSS布局优势一.精简代码，减少重构难度。网站使用DIV+CSS布局使代码很是精简，相信大多朋友也都略有所闻，css文件可以在网站的任意一个页面进行调用，而若是使用table表格修改部分页面却是显得很麻烦 这种布局方式适合以下情况： 注意点： 虽然 display: table 能解决等高问题，但现在更推荐使用 Flexbox 或 CSS Grid： 但在需要兼容IE8/9时，或者快速实现简单等高效果，display: table 依然是一个有效选择。 基本上就这些，掌握它能在特定场景下快速解决问题，但不要滥用。 标签。这种技术适用于需要等高列、水平排列且自动填充容器的场景，尤其在不使用Flexbox或Grid的老式布局中非常实用。
什么是 display: table 和 table-cell？
一样显示，占据容器宽度，支持边框和间距。
一样显示，用于包裹“单元格”。 或 一样显示，自动横向排列并等高。 基本用法：创建等高列布局
.cell 元素会并排显示，并且高度始终保持一致，即使内容不等。
常见应用场景与技巧
margin 分隔 table-cell 元素，建议用 border-spacing（需父级为 display: table 且设置 border-collapse: separate）。display: table-row 包裹。flex 或 grid 的动态伸缩行为，灵活性较低。与现代布局的对比
align-items: stretch 默认实现等高列，更简洁。
