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”样式。

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

1 个答案: