为什么表列表中有缩进？

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 {&nbsp; border: 0px&nbsp; border-collapse: separate;&nbsp; border-spacing: 0px;}见https://www.w3schools.com/cssref/tryit.asp?filename=trycss_border-spacing

Answer 2

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