在自定义表格表单中添加表格标题之间的宽度答案

【问题标题】：Add width between table headers in Custom Table Form在自定义表格表单中添加表格标题之间的宽度
【发布时间】：2021-05-13 18:02:54
【问题描述】：

使用来自 SO Table Form 的示例

我根据需要在组件中成功实现了表单。唯一困扰我的是标题之间没有间隙，我似乎无法弄清楚如何做到这一点，因为它看起来很奇怪。

正如您在突出显示的部分中看到的，它看起来很奇怪，标题之间没有间隙。

Working codebox

如果有人知道如何做到这一点，请告诉我。

我试过了：

formtable.css：

table {
    border-collapse: separate;
    border-spacing: 30px;
  }

它确实在页眉之间提供了空间，但是当页眉向左移动时看起来更难看，当点击表单内的添加地址时看起来很奇怪。

【问题讨论】：

标签： reactjs reactstrap

【解决方案1】：

嗯，你还没有应用任何样式。这说明了一切。

我添加了一些基本样式供您参考，您可以根据需要进行样式设置。

检查工作示例here

.App {
  font-family: sans-serif;
  text-align: center;
  padding: 1rem;
}

table {
  border-spacing: 0;
  border: 1px solid black;
}

tr:last-child td {
  border-bottom: 0;
}

th,
td {
  margin: 0;
  padding: 0.5rem;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
}

th:last-child {
  border-right: 0;
}
td:last-child {
  border-right: 0;
}

【讨论】：