如何创建可重叠于其他单元格的表格单元格？

要实现你要的百分比图表效果，核心是让覆盖层相对于目标单元格精准定位——之前用tr或td设position: absolute出问题，是因为元素脱离了表格布局流，width:100%会参考非表格元素的父容器宽度，而非单元格本身。

正确实现步骤： #

1. 在需要添加进度效果的<td>内部，嵌套一个相对定位的容器，让它完全填充单元格
2. 在容器里加一个绝对定位的进度条，通过width属性控制百分比，高度铺满容器

完整代码示例： #

<table border="1" cellpadding="8" cellspacing="0">
  <thead>
    <tr>
      <th>项目</th>
      <th>完成率</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>任务A</td>
      <td>
        <!-- 相对定位容器，作为进度条的定位基准 -->
        <div class="progress-container">
          <div class="progress-bar" style="width: 75%"></div>
          <!-- 显示百分比文本 -->
          <span class="progress-text">75%</span>
        </div>
      </td>
    </tr>
    <tr>
      <td>任务B</td>
      <td>
        <div class="progress-container">
          <div class="progress-bar" style="width: 40%"></div>
          <span class="progress-text">40%</span>
        </div>
      </td>
    </tr>
  </tbody>
</table>

/* 容器：相对定位，完全填充单元格 */
.progress-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 24px; /* 保证单元格高度足够 */
}

/* 进度条：绝对定位，铺满容器高度，宽度由内联样式控制 */
.progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: #4CAF50;
  z-index: 1; /* 让进度条在文本下方 */
}

/* 百分比文本：相对定位，确保在进度条上方显示 */
.progress-text {
  position: relative;
  z-index: 2;
  display: block;
  text-align: center;
}

关键说明： #

• progress-container设position: relative，让内部的绝对定位元素以它为基准，width:100%会严格匹配单元格宽度
• 进度条的width直接用百分比值（比如75%），就能精准对应单元格的宽度比例
• 通过z-index控制文本和进度条的层级，保证文字不被遮挡

内容的提问来源于stack exchange，提问作者THIAGO DE BONIS