JS动态创建HTML表格内嵌彩色Div文本不显示问题求助

我正在构建一个HTML表格，其中某一列包含动态创建的带背景色和文本内容的div元素。目前已成功创建div并添加样式，但无法让文本内容显示在div内部。我将带背景色的div视为父div，带文本的div视为子div，尝试过将文本div追加到父div、设置文本div更高的z-index，也尝试直接设置父div的innerText，均未生效。希望实现文本显示在彩色圆形内部的效果。

核心问题是样式设置错误导致文本被挤出或无法定位：

1. 移除错误的行高设置：.circle类中的line-height: 500px会把文本推到圆形外部，将其改为与圆形高度一致的line-height: 20px。
2. 调整文本定位方式：给.circle添加position: relative，让内部文本子元素可以基于圆形定位；对.circle-text使用绝对定位+平移实现精准居中，或者直接依赖父元素的text-align和line-height实现居中。

修改后的代码 #

JavaScript

const populateProjectsTable = (data) => {
  // Store table id in variable
  let tableRef = document.getElementById("recent-projects-table-body");
  // Clear out table data before loading new results
  $(tableRef).empty();
  $(tableRef).show();

  // 假设sampleData是已定义的数据源
  const sampleData = [{}, {}, {}, {}];

  sampleData.forEach((item) => {
    // Insert a row at the end of the table
    let newRow = tableRef.insertRow(-1);

    // Name Cell
    let nameCell = newRow.insertCell(0);
    nameCell.className = "left-align";
    let nameText = document.createTextNode("name");
    nameCell.appendChild(nameText);

    // Assessments Cell
    let assessmentsCell = newRow.insertCell(1);
    let assessmentsText = document.createTextNode("assessment count");
    assessmentsCell.className = "right-align";
    assessmentsCell.appendChild(assessmentsText);

    // Count Cell
    let countCell = newRow.insertCell(2);
    countCell.className = "center-align"
    // Div to hold circles
    let countsDiv = document.createElement('div');
    countsDiv.className = "counts-div";

    // Create individual circles
    // green
    let greenCount = document.createElement("div");
    greenCount.className = "circle green"
    let greenText = document.createElement("div");
    greenText.className = "circle-text";
    greenText.textContent = "1";
    greenCount.append(greenText);

    // yellow
    let yellowCount = document.createElement('div');
    yellowCount.className = "circle yellow";
    let yellowText = document.createElement("div");
    yellowText.className = "circle-text";
    yellowText.textContent = "1";
    yellowCount.append(yellowText);

    // red
    let redCount = document.createElement("div");
    redCount.className = "circle red";
    let redText = document.createElement("div");
    redText.className = "circle-text";
    redText.textContent = "1";
    redCount.append(redText);

    // Append to div
    countsDiv.append(greenCount, yellowCount, redCount);

    // Append div to cell
    countCell.appendChild(countsDiv);
  });
};

// 调用函数
populateProjectsTable();

CSS

/* ==================================================
Table styling
================================================== */

.table {
  margin-top: 1rem;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ddd;
  position: relative;
  border-radius: 0.8rem;
  overflow: clip;
}

th {
  font-weight: 500;
}

.sticky {
  position: sticky;
  position: -webkit-sticky;
  top: -1px;
}

.table-th,
.table td {
  padding: 8px;
  height: 40px;
}

.table>thead>tr {
  background-color: orange;
}

tbody tr:nth-child(even) {
  background-color: #fce8c3;
}

tbody tr:nth-child(odd) {
  background-color: white !important;
}

.table__small {
  width: fit-content;
}

.table__wide {
  width: 100%;
}

.right-align {
  text-align: right;
}

.center-align {
  text-align: center;
}

.left-align {
  text-align: left;
}


/* ==================================================
Circle styling
================================================== */

.circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  line-height: 20px;
  text-align: center;
  margin: 4px;
  position: relative;
}

.circle-text {
  font-size: 14px;
  color: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

.counts-div {
  display: flex;
  justify-content: center;
}

.green {
  background: green;
}

.yellow {
  background: yellow;
}

.red {
  background: red;
}

HTML

<table id="recent-projects-table" class="table" style="display: table;">
  <thead class="sticky">
    <tr id="projects-config-tr">
      <!-- Project Name -->
      <th class="sticky left-align table-th table-column__name">
        Recent Projects
      </th>
      <!-- Assessments -->
      <th class="sticky right-align table-th">Assessments</th>
      <!-- Counts -->
      <th class="sticky center-align table-th">Counts</th>
    </tr>
  </thead>
  <tbody id="recent-projects-table-body">
  </tbody>
</table>

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