Angular项目Bootstrap多列表格如何正确对齐th表头与对应td输入框

问题原因 #

你当前表格错位的核心原因是表头列数和表体列数不匹配：

• 你的thead定义了10个<th>，对应10列
• 表体<tr>内的<td>的colspan属性相加总和为12，和表头列数不一致，导致列宽规则无法对应。

解决步骤 #

1. 移除表体td多余的colspan配置，保持每列和表头一一对应，如果需要Name、Email字段宽度更大，直接通过colgroup指定对应列的宽度即可，不需要用colspan跨列。
2. 给table添加table-layout: fixed样式，强制表格按照预先定义的列宽渲染，不会因为内容自动调整宽度。
3. 正确配置colgroup，为每列设置对应宽度，保证表头和下方单元格宽度一致。

修正后的完整代码 #

<div class="table-responsive">
  <table class="table" style="width: 100%;table-layout: fixed;">
    <!-- 正确配置colgroup，可根据需求调整各列宽度占比 -->
    <colgroup>
      <col style="width: 15%"> <!-- Name列 -->
      <col style="width: 8%"> <!-- Age列 -->
      <col style="width: 10%"> <!-- Country列 -->
      <col style="width: 15%"> <!-- Address列 -->
      <col style="width: 15%"> <!-- Email列 -->
      <col style="width: 12%"> <!-- Phone Number列 -->
      <col style="width: 8%"> <!-- Pincode列 -->
      <col style="width: 7%"> <!-- City列 -->
      <col style="width: 7%"> <!-- State列 -->
      <col style="width: 3%"> <!-- Region列 -->
    </colgroup>
    <thead class="card-header">
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Country</th>
        <th>Address</th>
        <th>Email</th>
        <th>Phone Number</th>
        <th>Pincode</th>                
        <th>City</th>
        <th>State</th>
        <th>Region</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <!-- 去掉多余的colspan，每列和表头一一对应 -->
        <td class="required-field"><input type="text" class="form-control" formControlName="Name" placeholder="Name"></td>
        <td class="required-field"><input type="text" class="form-control" formControlName="Age" placeholder="Age"></td>
        <td class="required-field"><input type="text" class="form-control" formControlName="Country" placeholder="Country"></td>
        <td class="required-field"><input type="text" class="form-control" formControlName="Address" placeholder="Address"></td>
        <td class="required-field"><input type="text" class="form-control" formControlName="Email" placeholder="email"></td>
        <td class="required-field"><input type="text" class="form-control" formControlName="PhoneNumber" placeholder="phonenumber"></td>
        <td class="required-field"><input type="text" class= "form-control" formControlName="pincode" placeholder="pincode"></td>                   
        <td class="required-field"><input type="text" class="form-control" formControlName="city" placeholder="City"></td>
        <td class="required-field"><input type="text" class="form-control" formControlName="state" placeholder="state"></td>
        <td class="required-field"><input type="text" class="form-control" formControlName="Region" placeholder="Region"></td>
      </tr>                
    </tbody>
  </table>
</div>

补充说明 #

如果你确实需要让单个输入框跨多列，比如Name输入框同时占Name和Age两列，要保证表头对应的位置也加colspan，比如<th colspan="2">Name</th>，同时去掉原有的Age，保证表头和表体的列数总和一致即可。

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