第二次迭代时，react组件中不必要的填充？

Question

这是我的反应组件

return (
        <div>
         {this.props.data.map(({name,info,total_star,total_user,website,image }, index) => 
            <div key={index}>
                <div  className="card border-primary">
                    <div className="card-body">
                        <div className="row">
                            <div className="col-md-6">
                                <img src={image} className="img-resonsive card-image"></img>
                            </div>
                            <div className="col-md-6">
                                <table className="table table-responsive">
                                    <tr>
                                        <td>{index+1}</td><td className="channelName">{name}</td>
                                    </tr>
                                    <tr>
                                        <td>URL</td><td><Link to="" className="card-link">{website}</Link></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <img src="https://s3.ap-south-1.amazonaws.com/fourthpillar-static/media/star.png" style={{width:"25px",height:"25px"}}></img>
                                        </td>
                                        <td>  
                                            <h1 style={{textAlign:"left",float:"left" }}>{total_star/total_user}</h1>
                                            <h6 style={{textAlign:"left",float:"left",paddingTop:"30px"}}>
                                                /10
                                            </h6>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Votes</td><td>{total_user}</td>
                                    </tr>

                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <br></br>
            </div>
            )

这是我的app.css文件

.card{
    border:1px solid black!important;

}
.img-responsive.img-center {
    margin: 0 auto;
  }
.channelName{
    font-style: bold!important;
    font-size: 30px!important;
    text-shadow: 1px 1px #fe4902;
}

.card-image{
    width:90%;
    height:200px; 

}

map函数迭代10次。但是，当从第二次开始迭代时，我在表的td项之间得到了不必要的左填充。我不知道是CSS问题，反应问题还是引导问题。请帮我弄清楚。请看图片以了解。