能否仅让HTML表格文本跨列显示？需保留单元格背景色差异

你原来的代码存在逻辑错误：使用colspan="3"会将第一个单元格合并为占3列的宽度，后续的两个<td>会因为表格列数超出定义而被挤到表格外侧，无法实现你要的三个单元格各有背景色同时文本跨列的效果。

解决方案1：表格+CSS定位（兼容广，推荐） #

<style>
  .span-row {
    position: relative;
  }
  .cross-text {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: center;
    z-index: 1;
  }
  .span-row td {
    padding: 12px;
    border: 1px solid #000;
  }
</style>

<table border="1" cellpadding="0" cellspacing="0">
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </tr>
  <tr class="span-row">
    <td bgcolor="red"></td>
    <td bgcolor="green"></td>
    <td bgcolor="red"></td>
    <div class="cross-text">abcdefgh</div>
  </tr>
</table>

• 核心思路：保留三个独立的<td>分别设置背景色，通过绝对定位的容器承载跨列文本，让文本覆盖在三个单元格上方
• .span-row设置相对定位，作为文本容器的定位基准
• .cross-text通过绝对定位占满整行宽度，并用transform实现垂直居中，确保文本跨列显示且不影响单元格结构

解决方案2：CSS Grid模拟表格（更灵活） #

<style>
  .table-like {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid #000;
    border-collapse: collapse;
  }
  .grid-cell {
    border: 1px solid #000;
    padding: 12px;
  }
  .text-overlay {
    grid-column: 1 / span 3;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: center;
    z-index: 1;
  }
  .row-container {
    position: relative;
    grid-column: 1 / span 3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
</style>

<div class="table-like">
  <div class="grid-cell">1</div>
  <div class="grid-cell">2</div>
  <div class="grid-cell">3</div>
  <div class="row-container">
    <div class="grid-cell" style="background-color: red;"></div>
    <div class="grid-cell" style="background-color: green;"></div>
    <div class="grid-cell" style="background-color: red;"></div>
    <div class="text-overlay">abcdefgh</div>
  </div>
</div>

• 用Grid布局模拟表格结构，通过grid-column控制元素跨列，同时保留三个单元格的独立背景色设置
• 文本容器通过绝对定位覆盖在单元格上方，实现跨列显示效果

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