在表格 HTML 中的行之间添加边距

Question

尝试为组成表格的一些 React 样式的组件设置样式 - 一般样式还可以，但我在添加行之间的适当间距并在每行上保持所需的边框时遇到了很多困难。目前，我已将border: 8px solid #f9f9f9;; 添加到StyledTableRow，这为我提供了每行之间所需的间距（空白）。但是，我确实需要添加一个实际的边框（每行的所有边都为 1px 纯黑色），这显然与我之前的 8px 边框冲突？任何人都可以提出一个潜在的解决方法吗？对不起，我不能提供一个工作小提琴！

const StyledTableWrapper = styled.div`
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  margin-bottom: ${spacer()};
  background-color: #f9f9f9;
`;

const StyledTable = styled.div`
  display: table;
  border-collapse: collapse;
  width: 100%;
  background-color: transparent;
  min-width: ${({ minWidth }) => (minWidth ? minWidth : 0)};
`;

const StyledTableHead = styled.div`
  display: table-header-group;
  margin-bottom: 8px;
`;

const StyledTableRows = styled.div`
  display: table-row-group;
  border-collapse: separate;
`;

const StyledTableRow = styled.div`
  background-color: red;
  border-radius: 4px;
  display: table-row;
  height: 56px;
  border: 8px solid #f9f9f9;;
  width: 1248px;
  margin-top: 8px;
`;

Answer 1

table: {
borderSpacing: '0px 4px';}
   table: {
borderSpacing: '4px 0px';}
   table: {
borderSpacing: '4px 4px';}

根据您的要求在文件中添加“borderSpacing”样式。