CSS：减少表格中最后两列之间的距离

下面是我想显示的数据。

我想减少最后两列之间的距离，在标题Critical PS下。我为此使用了本地HTML表格元素。我还使用了边框间距和td的nth-child，但它没有发挥作用。以下是我目前所做的工作：反应组件。

<table id='aoi-table'>
        <tr>
          <th>Name</th>
          <th>Status</th>
          <th colSpan={2}>Critical PS</th>
        </tr>

        {cityData.map((item) => {
          return (
            <tr onClick={() => dispatch(addArea(item))}>
              <td>{item.name}</td>
              <td>
                <div className='status'>
                  {(() => {
                    if (item.status === "Safe") {
                      return <Dot color='#24A148' className='status-dot' />;
                    }
                    if (item.status === "Observe") {
                      return <Dot color='#F1C21B' className='status-dot' />;
                    }
                    if (item.status === "Critical") {
                      return <Dot color='#DA1E28' className='status-dot' />;
                    }
                  })()}

                  <div className='status-line'>{item.status}</div>
                </div>
              </td>
              <td>
                <div className='aoi-critical-value-wrapper'>
                  {item.critical}
                </div>
              </td>
              <td>
                {(() => {
                  if (item.criticalValue > 0) {
                    return (
                      <div className='aoi-critical-value-positive'>
                        <UpArrowAlt className='icon-arrow' />
                        {item.criticalValue.toString()}
                      </div>
                    );
                  } else if (item.criticalValue < 0) {
                    return (
                      <div className='aoi-critical-value-negative'>
                        <DownArrowAlt className='icon-arrow' />
                        {item.criticalValue.toString().substring(1)}
                      </div>
                    );
                  } else {
                    return (
                      <div className='aoi-critical-value-neutral'>
                        {"-"}
                        {item.criticalValue}
                      </div>
                    );
                  }
                })()}
              </td>
            </tr>
          );
        })}
      </table>

我写的css：

/*there is gap between the headers, this is to remove the gap.*/
#aoi-table {
  border-spacing: 0px;
}

#aoi-table th {
  padding: 1rem;
  background-color: #21272a;
  color: #ffffff;
  border: none;
  font-weight: 300;
  font-size: 18px;
}

#aoi-table {
  width: 100%;
}

#aoi-table td {
  padding: 1rem;
  cursor: pointer;
}

/* not working.*/
#aoi-table tr td:nth-child(3) {
  border-spacing: 10px;
}

以下是我目前所做的工作：

你可以看到它是正确对齐的。我只是想减少标题下最后两列的间隙，关键是PS。我已经用nth-child来减少边框间距，但不太有效。请给我任何建议。