React项目中HTML表格A、B列间空白过大的解决求助

问题说明 #

HTML原生的cellspacing属于旧版属性，现代浏览器中常被CSS样式覆盖，所以直接设置不会生效；同时长内容会自动撑开列宽，导致B列移位。以下是针对性解决方案：

方案1：全局调整单元格间距（统一缩小所有列间距） #

用CSS的border-spacing替代cellspacing，精准控制单元格的水平/垂直间距：

table {
  /* 第一个值为水平间距，第二个为垂直间距，按需调整数值 */
  border-spacing: 4px 8px;
}

方案2：单独缩小A、B列之间的间距（不影响其他列） #

通过调整A列右侧内边距、B列左侧内边距，只缩小目标区域的空白：

/* 调整A列所有单元格的右内边距 */
#main-table-head th:first-child,
tbody td:first-child,
tfoot td:first-child {
  padding-right: 4px;
}
/* 调整B列所有单元格的左内边距 */
#main-table-head th:nth-child(2),
tbody td:nth-child(2),
tfoot td:nth-child(2) {
  padding-left: 4px;
}

方案3：固定表格布局，解决长内容导致的B列移位 #

锁定表格列宽，避免长内容撑开列导致移位，同时设置内容自动换行：

table {
  table-layout: fixed;
  width: 100%; /* 也可设为固定宽度，比如800px */
}
/* 给A、B列设置固定宽度 */
#main-table-head th:first-child,
tbody td:first-child,
tfoot td:first-child {
  width: 120px;
}
#main-table-head th:nth-child(2),
tbody td:nth-child(2),
tfoot td:nth-child(2) {
  width: 150px;
}
/* 长内容自动换行，防止溢出 */
td {
  word-wrap: break-word;
  white-space: normal;
}

内容的提问来源于stack exchange，提问作者Chamidu Purage