如何在CSS中使用布局制作表格样式布局_Display table和table-cell应用-css教程-PHP中文网

如何在CSS中使用布局制作表格样式布局_Display table和table-cell应用

P粉602998670

发布： 2025-11-30 19:58:57

原创

700人浏览过

display: table 和 table-cell 可使元素表现如表格，实现等高列布局；通过将父容器设为 display: table，子元素设为 display: table-cell，可让各列自动等高并横向排列，适用于旧浏览器兼容或无需Flexbox/Grid的场景。该方法支持垂直对齐和均匀填充，但缺乏现代布局的灵活性，且不利于语义化与维护，建议仅在特定情况下使用。

如何在css中使用布局制作表格样式布局_display table和table-cell应用

在CSS中，利用 display: table 和 display: table-cell 可以创建类似HTML表格的布局效果，而无需使用实际的 <table> 标签。这种技术适用于需要等高列、水平<a style="color:#f60; text-decoration:underline;" title="排列" href="https://www.php.cn/zt/56129.html" target="_blank">排列</a>且自动填充容器的场景，尤其在不使用Flexbox或Grid的老式布局中非常实用。<h3>什么是 display: table 和 table-cell？</h3> <p>CSS 的 <strong>display</strong> 属性允许元素表现得像表格结构中的不同部分：</p> <ul><li> <strong>display: table</strong> —— 元素像 <code><table> 一样显示，占据容器宽度，支持边框和间距。<li> <strong>display: table-row</strong> —— 元素像 <code><tr> 一样显示，用于包裹“单元格”。<li> <strong>display: table-cell</strong> —— 元素像 <code><td> 或 <code><th> 一样显示，自动横向排列并等高。<p>这些值不会改变HTML语义，但能实现视觉上的表格布局，适合构建灵活的UI组件。</p> <h3>基本用法：创建等高列布局</h3> <p>使用 <strong>display: table</strong> 和 <strong>table-cell</strong> 最大的优势是所有“单元格”自动等高，内容最多的列决定整体高度。</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <p><font face="Courier New"></font></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"> <div class="table-layout"> <div class="cell">左侧内容较短</div> <div class="cell">右侧内容较多，会撑高整个行，左侧也会随之变高。</div> </div> </pre>

登录后复制

</div><style>
.table-layout {
  display: table;
  width: 100%;
  border-spacing: 10px; /* 仅在 display: table 上生效 */
}
.cell {
  display: table-cell;
  padding: 10px;
  background: #eef;
  vertical-align: top;
  width: 50%;
}
</style>
<p>上面代码中，两个 <code>.cell

元素会并排显示，并且高度始终保持一致，即使内容不等。

艺帆集团公司企业网站源码1.7.5

艺帆集团公司企业网站源码基于艺帆企业cms制作，全站div+css 制作；它包含了单页设置、单页分类设置、新闻、产品、下载、在线招聘、在线留言、幻灯管理、友情链接管理和数据库备份等功能。 DIV+CSS布局优势一.精简代码，减少重构难度。网站使用DIV+CSS布局使代码很是精简，相信大多朋友也都略有所闻，css文件可以在网站的任意一个页面进行调用，而若是使用table表格修改部分页面却是显得很麻烦

查看详情

常见应用场景与技巧

这种布局方式适合以下情况：

卡片布局：多个卡片高度一致，视觉整齐。
表单对齐：标签与输入框对齐，保持垂直一致性。
响应式前的兼容布局：在不支持 Flexbox 的旧浏览器中提供替代方案。

注意点：

无法直接使用 margin 分隔 table-cell 元素，建议用 border-spacing（需父级为 display: table 且设置 border-collapse: separate）。
如果希望换行，需要用多个 display: table-row 包裹。
不支持 flex 或 grid 的动态伸缩行为，灵活性较低。