使用JavaScript添加的表格<td>与<th>无法对齐的解决方法

问题根源 #

你的代码存在两个核心问题：

1. HTML语法错误：新增行的模板里，有两个<td>标签未正确闭合（received和Later对应的标签），最后一行的<tr>也未闭合，导致DOM结构异常，直接影响布局对齐。
2. 表头与内容表分离：表头和内容分属两个独立的<table>标签，浏览器无法自动同步两者的列宽，这是对齐失效的主要原因。

修复步骤 #

1. 修正HTML模板语法错误 #

修改addRow函数中的模板字符串，补全未闭合的标签：

function addRow() {
  var tbodyEL = document.getElementById("employer_my_offers_body");
  tbodyEL.innerHTML += `<tr>
                            <td> 12 </td>
                            <td> 16 </td>
                            <td> 50 </td>
                            <td> received </td>
                            <td> Later </td>
                            <td> Empty </td>
                        </tr>`;
}

2. 同步表头与内容表的列宽 #

推荐采用合并表头与内容到同一个表格的方案，这是最规范且易维护的方式：

<section>
  <div class="container-fluid">
    <div class="row" style="max-height: 200px;">
      <div class="table-responsive col-md-12" style="max-height: 200px;">
        <div class="tbl-content">
          <table cellpadding="0" cellspacing="0" border="0" style="max-height: 120px;">
            <caption> Your offers </caption>
            <thead style="display:table-header-group">
              <tr>
                <th class="sorting text-center">Job ID</th>
                <th class="sorting text-center">Wage</th>
                <th class="sorting text-center">Effort</th>
                <th class="sorting text-center">Status</th>
                <th class="sorting text-center">Action</th>
                <th class="sorting text-center">Worker ID</th>
              </tr>
            </thead>
            <tbody id="employer_my_offers_body">
              <!-- Offers will come in here -->
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</section>

然后调整CSS实现表头固定效果（滚动时表头不跟随滚动）：

.tbl-content {
  height: 300px;
  overflow-y: auto;
  margin-top: 0px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.tbl-content table {
  width: 100%;
  table-layout: fixed;
}

.tbl-content thead {
  position: sticky;
  top: 0;
  background-color: rgba(255, 255, 255, 0.3);
}

如果坚持保留两个独立表格，可手动设置固定列宽强制对齐：

table {
  width: 100%;
  table-layout: fixed;
}

th, td {
  width: 16.66%; /* 6列均分宽度 */
  box-sizing: border-box; /* 避免padding影响宽度计算 */
}

3. 移除冗余代码（可选） #

合并表格后，原resize事件中处理滚动条宽度的代码可直接移除，因为同一个表格的表头与内容会共享滚动条。

效果验证 #

完成上述修改后，新增的<td>会与<th>完美对齐，同时DOM结构更规范，避免了语法错误引发的其他布局问题。

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