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



尝试对组成一个表的一些React样式的组件进行样式设置-一般样式是可以的,但我在添加适当的行间距和在每行上保持所需的边界方面遇到了很多困难。目前,我已经在StyledTableRow中添加了border: 8px solid #f9f9f9;;,这为我提供了每行之间所需的间距(空白(。然而,我确实需要添加一个实际的边框(每行所有边都是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;
`;
table: {
borderSpacing: '0px 4px';}
table: {
borderSpacing: '4px 0px';}
table: {
borderSpacing: '4px 4px';}

添加";borderSpacing";根据您的要求在您的文件中设置样式。

最新更新