如何让h1#balanceCCA始终固定显示在动态HTML表格的Credit列上方

方案1：调整HTML结构（最稳定，无额外依赖） #

直接将余额标题嵌入表格头部的专属行，天然和Credit列对齐，完全适配动态列宽，不需要写JS：

<div class="div2">
  <table class="highlight centered responsive-table">
    <thead>
      <!-- 新增余额专属行，其余列合并留空 -->
      <tr style="border: none;">
        <th colspan="5" style="border: none;"></th>
        <th style="border: none;">
          <h1 id="balanceCCA" class="waves" style="margin: 0 0 10px 0;">Balance: -10000</h1>
        </th>
        <th colspan="4" style="border: none;"></th>
      </tr>
      <tr style="font-size: large;"> 
        <th style="border-top-left-radius: 10px;">Date</th> 
        <th>Ledg.No.</th> 
        <th>Receipt No.</th>
        <th>Name</th>
        <th>Vehicle.Num</th>
        <th>Credit</th>
        <th>Debit</th>
        <th>Note</th>
        <th>Edit</th>
        <th style="border-top-right-radius: 10px;"></th> 
      </tr>
    </thead>
    <tbody id="searchResultsBody">

    </tbody>
  </table>
</div>

原代码里h1的固定margin-left直接删掉即可，这个方案不管表格列宽怎么调整，余额都会始终在Credit列正上方。

方案2：JS动态计算（不改动现有结构的选择） #

如果不想调整现有HTML结构，可以用JS动态计算Credit列的位置，同步给h1设置左偏移：

1. 先删掉h1原有style里的固定margin-left：

<h1 id="balanceCCA" class="waves" style="margin-bottom: 10px;">Balance: -10000</h1>

2. 加入JS逻辑：

function alignBalanceToCredit() {
  const creditColumn = document.querySelector('table.responsive-table thead tr th:nth-child(6)');
  const balanceElement = document.getElementById('balanceCCA');
  if (!creditColumn || !balanceElement) return;
  // 计算Credit列距离页面左侧的绝对偏移
  const leftOffset = creditColumn.getBoundingClientRect().left + window.scrollX;
  balanceElement.style.marginLeft = `${leftOffset}px`;
}

// 页面加载完成后执行对齐
window.addEventListener('load', alignBalanceToCredit);
// 窗口尺寸变化时重新对齐
window.addEventListener('resize', alignBalanceToCredit);
// 表格内容动态更新后，手动调用一次alignBalanceToCredit()即可

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