Adding margin between rows in a table HTML

Question

trying to style some React styled components that make up a table - the general styling is ok but I'm having a lot of difficulty adding the appropriate spacing between rows and maintain the desired border on each row. Currently, I have added border: 8px solid #f9f9f9;; to the StyledTableRow which gives me the desired spacing (whitespace) between each row. However, I do need to add an actual border (1px solid black to all sides of each row) which is obviously conflicting with my previous border of 8px? Can anyone suggest a potential workaround? Sorry I can't provide a working fiddle!

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;
`;

You can add working example (After rendering) but for table you can use flexbox or grid layouts — Greg--

Amol Amol · Accepted Answer · 2021-05-18T09:13:30

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

Add "borderSpacing" style in your file as per your requirment.

Adding margin between rows in a table HTML

1 Answers