如何用HTML实现表格单元格内的背景颜色加载效果（附设计参考）

核心实现思路 #

将背景层与文本层分离，让背景层负责动态宽度的色块展示，文本层独立居中显示在单元格上方，解决文本随背景偏移的问题。

最终实现代码 #

<table border="1" style="width: 100%;">
  <tr>
    <td style="position: relative; text-align: center; padding: 8px;">
      <!-- 动态宽度的背景色块 -->
      <div style="position: absolute; left: 0; top: 0; height: 100%; width: 20%; background-color: blue; z-index: 0;"></div>
      <!-- 居中显示的文本 -->
      <div style="position: relative; z-index: 1;">12345</div>
    </td>
    <td style="position: relative; text-align: center; padding: 8px;">
      <div style="position: absolute; left: 0; top: 0; height: 100%; width: 60%; background-color: green; z-index: 0;"></div>
      <div style="position: relative; z-index: 1;">67890</div>
    </td>
  </tr>
</table>

关键细节说明 #

• 给<td>设置position: relative，作为内部绝对定位元素的参考容器
• 背景层使用position: absolute，设置left:0、top:0、height:100%，宽度通过width属性动态调整（可根据计算结果赋值）
• 文本层通过position: relative和更高的z-index，确保显示在背景层上方，同时借助<td>的text-align: center实现居中
• 给<td>添加padding，避免文本紧贴单元格边缘，优化视觉体验

内容的提问来源于stack exchange，提问作者Vishnu narayanan m