如何实现相邻表格单元格重叠且不显示后方表格（禁用绝对定位）

要实现单元格重叠相邻单元格、保持表格原尺寸且不露出后方背景，不用绝对定位的话，可以通过相对定位+负margin或者固定表格布局两种方法解决，具体如下：

方法1：负margin抵消宽度变化（更灵活） #

这种方法不需要固定表格布局，通过负margin抵消单元格宽度增加带来的表格尺寸变化：

table {
  border-collapse: collapse;
  border: 1px solid black;
  font-family: monospace;
}
.green{background:lightgreen}
.blue{background:lightblue}
.red{background:pink}

.overlap-cell {
  position: relative;
  left: -3ch; /* 左移覆盖相邻单元格 */
  width: 6ch; /* 增加宽度，保证覆盖后的显示空间 */
  margin-right: -3ch; /* 负margin抵消宽度增加，维持表格总宽度不变 */
  z-index: 1; /* 确保当前单元格在相邻单元格上方，避免被遮挡 */
}

表格应保持此尺寸：
<table class="green">
  <tr class="green">
    <td class="blue">BLU</td>
    <td class="red">RED</td>
  </tr>
</table>
<br>
重叠效果（保持原尺寸）：
<table class="green">
  <tr class="green">
    <td class="blue">BLU</td>
    <td class="red overlap-cell">RED</td>
  </tr>
</table>

原理说明 #

• position: relative + left: -3ch 让红色单元格左移覆盖蓝色单元格，但原位置仍占据布局空间。
• width: 6ch 扩展单元格宽度，保证覆盖后内容完整显示。
• margin-right: -3ch 抵消宽度增加的部分，让表格总宽度维持和原始表格一致（蓝色单元格宽度 + 红色单元格宽度 - 负margin值 = 原总宽度）。
• z-index:1 确保红色单元格层级更高，不会被蓝色单元格遮挡。

方法2：固定表格布局（适合固定宽度场景） #

如果表格宽度是固定值，可以用table-layout: fixed强制锁定表格尺寸，再调整单元格宽度：

table {
  border-collapse: collapse;
  border: 1px solid black;
  font-family: monospace;
  table-layout: fixed; /* 固定表格布局，宽度由CSS设置值决定 */
  width: 6ch; /* 设置为原始表格的总宽度 */
}
.green{background:lightgreen}
.blue{background:lightblue}
.red{background:pink}

.overlap-cell {
  position: relative;
  left: -3ch;
  width: 6ch;
  z-index: 1;
}

.fixed-width-cell {
  width: 3ch; /* 固定相邻单元格宽度，匹配原始布局 */
}

表格应保持此尺寸：
<table class="green">
  <tr class="green">
    <td class="blue">BLU</td>
    <td class="red">RED</td>
  </tr>
</table>
<br>
重叠效果（保持原尺寸）：
<table class="green">
  <tr class="green">
    <td class="blue fixed-width-cell">BLU</td>
    <td class="red overlap-cell">RED</td>
  </tr>
</table>

原理说明 #

• table-layout: fixed 让表格宽度严格遵循设置的width值，不受单元格内容宽度变化影响。
• 固定蓝色单元格的原始宽度，红色单元格扩展宽度后左移，由于表格布局被锁定，总尺寸不会变化，也不会露出后方的绿色背景。

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