应用.green-circle样式后table的td宽度被重置，如何保持原有宽度？

这个问题的核心原因是：你把.green-circle直接应用在了<td>元素上，而该类里的display: inline-block和固定width: 20px会覆盖表格单元格（table-cell）的原生布局规则，强制把td的宽度改成20px，自然就会和相邻td重叠了。

下面给你几种靠谱的解决方案，任选一种都能解决问题：

方案1：在TD内嵌套span元素（最推荐） #

不要直接给td加样式类，而是在td里面放一个span，把.green-circle应用到span上。这样td依然保持表格单元格的原生布局，宽度不受影响，内部的span负责展示圆形。

修改后的HTML示例：

<td><span class="green-circle"></span> 0</td>

你的CSS可以保持不变，因为span是行内块元素，不会影响td的宽度。如果不需要显示文字，直接写<td><span class="green-circle"></span></td>就行。

方案2：使用CSS伪元素实现圆形（不修改HTML结构） #

如果不想改动HTML结构，可以通过伪元素在td内部生成圆形，这样不会破坏td的原生布局。

修改后的CSS代码：

.green-circle {
  /* 保留td的原生布局，去掉width、display属性 */
  position: relative;
  /* 可选：调整文字和圆形的对齐方式 */
  display: flex;
  align-items: center;
}
.green-circle::before {
  content: '';
  height: 20px;
  width: 20px;
  background-color: green;
  border-radius: 50%;
  margin-right: 8px; /* 控制圆形和文字的间距 */
}

这样td依然会保持原来的宽度，伪元素生成的圆形会和td内的内容共存，不会导致重叠。

方案3：强制TD保持原有宽度（不推荐） #

如果一定要给td直接加类，可以尝试去掉display: inline-block，并设置min-width来保留td的原有宽度，但这种方式可能会和表格的布局规则冲突，稳定性不如前两种：

.green-circle {
  height: 20px;
  /* 去掉width和inline-block */
  background-color: green;
  border-radius: 50%;
  /* 强制td最小宽度等于原有宽度，比如你的CausticRecirculation列是143px */
  min-width: 143px;
  display: flex;
  align-items: center;
  justify-content: center; /* 让圆形居中 */
}

但这种方式的缺点是需要手动设置每个列的min-width，不够灵活，所以优先推荐前两种方案。

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