如何缩小HTML表格中‘Critical PS’下最后两列的间距？

我需要缩小HTML表格中表头「Critical PS」下方最后两列的间距，该表格采用原生HTML table元素结合React组件实现。尝试使用border-spacing属性和td的nth-child选择器进行调整，但并未生效。

目标效果 #

React组件代码 #

<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;
}

当前效果 #

目前表格已对齐，仅需缩小「Critical PS」下最后两列的间距，以下是可行建议：

调整方案 #

1. 直接修改目标列的内边距 #

border-spacing是表格级属性，无法单独作用于单个单元格。你可以针对「Critical PS」下方的第3、4列单元格，减少它们的内边距来缩小间距：

#aoi-table tr td:nth-child(3),
#aoi-table tr td:nth-child(4) {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

根据实际需求调整0.5rem的数值，就能快速缩小两列之间的视觉间距。

2. 分配表格列宽 #

因为表格设置了width:100%，可以给前两列分配更多宽度，让最后两列自动收缩：

#aoi-table th:nth-child(1),
#aoi-table td:nth-child(1) {
  width: 40%;
}
#aoi-table th:nth-child(2),
#aoi-table td:nth-child(2) {
  width: 30%;
}

剩下的宽度会自动分配给最后两列，自然压缩它们的间距。

3. 清理内层容器的额外间距 #

检查.aoi-critical-value-wrapper等单元格内的div元素，看看是否有额外的margin或padding，如果有，去掉这些样式也能减少列内的空间占用，间接缩小列间距。

内容的提问来源于stack exchange，提问作者tanjim anim