如何使用div实现原生table的colspan与rowspan布局效果

你当前用display: table / table-row / table-cell搭建的模拟表格，可通过对应CSS属性实现和原生HTML表格完全对齐的跨列、跨行能力，不需要重构布局结构：

• 跨列合并：给目标单元格设置column-span: N，N为需要横跨的列数，完全等价于原生<td colspan="N">的表现
• 跨行合并：给目标单元格设置row-span: N，N为需要纵跨的行数，完全等价于原生<td rowspan="N">的表现

基础样式修正 #

你原有示例代码存在两处和CSS表格模型规则冲突的问题，会导致样式表现和预期不符，需要调整：

1. display: table-row类型的元素不支持设置padding，原代码写在.tr类上的padding:5px不会生效
2. display: table-cell类型的元素不支持设置margin，原代码写在.td类上的margin:5px不会生效
   修正后的基础CSS结构如下：

.table {
  display: table;
  border-collapse: collapse;
  padding: 5px;
}
.tr {
  display: table-row;
}
.td {
  display: table-cell;
  padding: 5px;
  width: 150px;
  border: 1px solid #000;
}
/* 跨列工具类 */
.span-col-2 {
  column-span: 2;
}
/* 跨行工具类 */
.span-row-2 {
  row-span: 2;
}

实际使用示例 #

以下结构可实现和原生表格完全一致的跨列、跨行效果：

<div class="table">
  <div class="tr">
    <!-- 等价于 rowspan="2" 的跨行单元格 -->
    <div class="td span-row-2">
      Row 1 纵向合并区域
    </div>
    <div class="td">Row 1, Column 2</div>
    <!-- 等价于 colspan="2" 的跨列单元格 -->
    <div class="td span-col-2" style="background:#888;">
      Row 1 横向合并区域
    </div>
  </div>
  <div class="tr">
    <div class="td">Row 2, Column 2</div>
    <div class="td">Row 2, Column 3</div>
    <div class="td" style="background:#888;"></div>
  </div>
</div>

低版本兼容替代方案 #

目前主流现代浏览器（Chrome 117+、Firefox 125+、Safari 17.4+）已原生支持table-cell元素的跨列、跨行属性。如果需要兼容更低版本的浏览器，可改用CSS Grid布局实现同效果的布局，兼容性覆盖范围更广，同样完全基于div元素实现，不引入结构化表格语义。
CSS Grid方案的基础代码示例：

.grid-table {
  display: grid;
  /* 定义3列，每列宽度150px */
  grid-template-columns: repeat(3, 150px);
  gap: 1px;
  background: #000;
  padding: 5px;
}
.grid-cell {
  background: #fff;
  padding: 5px;
}
/* 跨2列 */
.grid-span-col-2 {
  grid-column: span 2;
}
/* 跨2行 */
.grid-span-row-2 {
  grid-row: span 2;
}

注意事项 #

• 跨列、跨行的尺寸计算由浏览器自动完成，和原生表格逻辑一致，不需要手动计算元素位置或宽高
• 如果需要调整单元格之间的间距，可给.table容器设置border-spacing属性，等价于原生表格的cellspacing效果
• 两种实现方式均符合前端布局规范，仅用div元素承担布局职责，不会误用语义化表格标签

内容的提问来源于stack exchange，提问作者Mykhaylo Adamovych