react-bootstrap表格td标签值与对应thead表头不对齐如何解决

异常表现 #

使用React-Bootstrap的Table组件构建数据表格时，表头单元格和下方表体对应列的单元格无法精确对齐，表格排序、hover等其余功能均正常。

根因分析 #

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

• 表头<thead>的行内一共定义了10个<th>：Rank、Logo、Name、1个无内容空<th>、Wins、Loss、Draws、Games、GF、GA
• 表体<tbody>每一行仅渲染了9个<td>，比表头少1列
  当给表格添加responsive响应式属性时，Bootstrap会给表格套一层滚动容器，列数不匹配会直接导致浏览器列宽计算逻辑出错，最终出现对齐偏移。

修复方案 #

二选一即可解决：

• 方案1：如果Name列后不需要预留空列，直接删除表头中多余的空<th></th>标签，让表头总列数和表体保持9列一致
• 方案2：如果该空列是预留的操作列/自定义列，需要在表体每一行的对应位置（Name列的td之后、Wins列的td之前）补全对应的<td>节点，保证表头、表体每行列数完全相等

修复后参考代码（方案1） #

<Table striped hover responsive >
  <thead>
    <tr>
      <th>Rank</th>
      <th>Logo</th>
      <th>Name</th>
      <th>Wins</th>
      <th>Loss</th>
      <th>Draws</th>
      <th>Games</th>
      <th>GF</th>
      <th>GA</th>
    </tr>
  </thead>
  <tbody>
    {team && team.map((team, key) =>{
      return <tr key={key}>
        <td>{key + 1}</td>
        <td><img src={team.team.logos[0].href} alt='team logo' width={40} height={40}/></td>
        <td>{team.team.name}</td>
        <td>{team.stats[0].value}</td>
        <td>{team.stats[1].value}</td>
        <td>{team.stats[2].value}</td>
        <td>{team.stats[3].value}</td>
        <td>{team.stats[4].value}</td>
        <td>{team.stats[5].value}</td>
      </tr>
    })}
  </tbody>
</Table>

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