为什么表列表中有缩进？

Question

我获取 Api 数据并将它们作为我的 React-Redux 应用程序中的表列表输出到页面。它应该是这样的：但我是这样理解的：忽略不同的颜色。问题是我的灰线断了。我不需要缩进。此外，线也应该达到白色容器宽度的末端。可能是什么问题？以及如何修复它？TableData.js（显示页面数据的组件）：import React from "react";export default ({ data }) => (     <div className="tableContainer">  <table className="table">    <thead>      <tr>        <th>Terminal</th>        <th>Gate</th>        <th>Time</th>        <th>Destination</th>        <th>Airline</th>        <th>Flight</th>        <th>Status</th>      </tr>    </thead>    <tbody>      {data.map(item => {         const dt = new Date(item.actual);         const mins = dt.getMinutes();        return (          <tr key={item.ID}>            <td>{item.term}</td>            <td>{item.gateNo}</td>            <td>{`${dt.getHours()}:${mins < 10 ? '0' : ''}${mins}`}</td>            <td>              {item["airportToID.city_en"]                ? item["airportToID.city_en"]                : item["airportFromID.city_en"]}            </td>            <td>{item.airline.en.name}</td>            <td>{item["planeTypeID.code"]}</td>            <td>{item.status}</td>          </tr>        );      })}    </tbody>  </table></div>);  app.css（样式）：/*Table*/.tableContainer{    background: white;    width: 800px;    margin-left: auto;    margin-right: auto;    text-align: left;}table td,table th {  padding: 15px;  margin: 0;  font-size: 18px;}th {    color: grey;}.tableContainer tr:nth-child(even) {  background-color: grey;  padding-right: 0;}

Answer 1

试一试

table {

  border: 0px

  border-collapse: separate;

  border-spacing: 0px;

}

见https://www.w3schools.com/cssref/tryit.asp?filename=trycss_border-spacing

Answer 2

对表格使用 { border-spacing: 0px }