TD标签中的值不相应地在表头（React-Bootstrap）上方

Question

我正在尝试使用Bootstrap在ReactJ中创建一个表。除了：

如您所见，Thead标签内的标题并不完全对齐其相应的TD标签。有办法做到吗？

这是代码：

<Table striped hover responsive >
  <thead>
    <tr>
      <th>Rank</th>
      <th>Logo</th>
      <th>Name</th>
      <th ></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>

Answer 1

我看不到代码，但是TD似乎有一定的余量。但是，由于TD中列出的数据中的单词数量，您仍然会遇到它的问题。一个解决方案将单独使用每个TD进行样式，直到您获得想要的方式为止。