如何在表格指定<th>中插入图片且保留原有文本（不可修改HTML）

你直接给目标th元素设置content属性会替换掉元素内的原有文本，这是问题的核心。要在保留文本的同时插入图片，改用伪元素实现即可，无需修改HTML：

修正后的CSS代码 #

table {
  text-align: center;
  border-collapse: collapse;
  border: 1px solid black;
  font-family: Arial;
}

tr:nth-child(even)>td,
th {
  background-color: #FFFFCC;
}

th {
  background-color: rgba(88, 88, 88, 0.2);
}

tr:nth-child(n+2)>th {
  background-color: #E6F3FF;
}

/* 修复代码 */
tr:nth-child(2) th:first-child {
  border: 0;
  /* 为图片预留左侧空间 */
  padding-left: 20px;
  position: relative;
}

tr:nth-child(2) th:first-child::before {
  content: url("imagenes/euro.png");
  position: absolute;
  left: 2px;
  top: 50%;
  /* 让图片和文本垂直居中对齐 */
  transform: translateY(-50%);
}

关键说明 #

• 用::before伪元素插入图片，不会覆盖th内的原始文本
• 通过position: relative给伪元素提供定位基准，absolute定位让图片固定在左侧
• padding-left避免文本和图片重叠，数值可根据图片大小调整
• transform: translateY(-50%)确保图片和文本垂直居中对齐

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