javascript - 为什么表格列表中有缩进？

Question

我在我的 React-Redux 应用程序中获取 Api 数据并将它们作为表格列表输出到页面。

它应该是这样的:

但我是这样理解的:

忽略不同的颜色。问题是我的灰线断了。我不需要缩进。另外，行也应该达到白色容器宽度的末尾。可能是什么问题？以及如何解决？

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