如何用HTML/CSS实现PREPARED BY与CHARGE表格的横向对齐？

核心思路 #

用CSS的flex或grid布局把两个表格包裹起来，控制它们的排列和对齐规则，同时统一表格基础样式，既能实现横向对齐，还能避免PREPARED BY部分随循环重复。

具体操作步骤 #

• 用flex容器实现并排布局
  给外层容器添加flex属性，让两个表格横向排列，同时设置顶部对齐（匹配示例图效果），还可调整表格间的间距：

  .table-wrap {
    display: flex;
    align-items: flex-start;
    gap: 20px; /* 表格间的空隙，可按需调整 */
    flex-wrap: wrap; /* 屏幕较窄时自动换行，可选 */
  }
  

  对应HTML结构：

  <div class="table-wrap">
    <!-- PREPARED BY 表格，放在循环外部避免重复 -->
    <table class="prepared-table">
      <tr>
        <td>PREPARED BY:</td>
      </tr>
      <tr>
        <td>签名栏</td>
      </tr>
      <!-- 其他签名相关内容 -->
    </table>
  
    <!-- CHARGE 统计表格，循环生成内部统计行 -->
    <table class="charge-table">
      <tr>
        <td>CHARGE</td>
        <td>金额</td>
      </tr>
      <!-- 循环生成的各类统计行 -->
      <tr>
        <td>Grand Total</td>
        <td>$XXX.XX</td>
      </tr>
    </table>
  </div>
  

• 统一表格基础样式
  给两个表格设置相同的内边距、边框等样式，防止因样式差异导致对齐错位：

  table {
    border-collapse: collapse;
  }
  table td {
    padding: 8px 12px;
    border: 1px solid #ddd; /* 不需要边框可删除 */
  }
  

• 避免重复的逻辑说明
  你拆分表格的思路是对的——把PREPARED BY表格放在循环代码外面，CHARGE表格放在循环内生成统计内容，再用flex容器包裹，既能避免PREPARED BY重复，又能实现横向对齐。

备选方案（Grid布局） #

如果flex布局达不到预期，也可以尝试grid布局：

.table-wrap {
  display: grid;
  grid-template-columns: auto 1fr; /* 第一个表格自适应宽度，第二个占剩余空间 */
  gap: 20px;
  align-items: flex-start;
}

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