The value in the td tag is not correspondingly above table head (react-bootstrap)-CodePudding

I am trying to create a table in reactjs using bootstrap. Everything seems fine except:

As you can see, the titles inside the thead tag is not aligned exactly above its corresponding td tag. Is there a way to do it?

Here is the code:

<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>

CodePudding user response：

I cannot see the code, but there seems to be some margin for the td. But you will still have issues with it lining up due to the number of words in td to the data listed. A solution would be styling each td by itself until you get it how you'd like.