Strange line showing up under even rows in Table when applying border-collapse + border-spacing. Can't find the faulty property

Question

I just wanted to apply a space between the rows in my table. A quick search gave me the answer.

It worked, however, something is wrong. Check the screenshot below:

You can see that right under the dark grey (even) rows there is a line that seems to me to have the same color as the background of the odd rows. Then the black from the background comes, which is what I wanted, then an odd row, then the black background (again correct). The "line" only shows up after an even row, not an odd one. I don't want it to show at all.

I looked at all elements in the surroundings of the table and all the elements inside the table and table itself on Chrome inspector trying to look for some background, padding, or whatever but no luck. At some point, I was just disabling everything to see if I could find the property to blame, but no luck. The line only disappears if I disabled the border-spacing or border-collapse, but that obviously disables the space separating the rows, which brings me back to square one.

I really could use some help on this, as I spent way too much time as I intended on something so silly

Here is the code of the component

import React, {Fragment} from 'react';
import Container from '@material-ui/core/Container';
import Typography from "@material-ui/core/Typography";
import { withStyles, makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import theme from "../../config/theme";


const StyledRow = withStyles((theme) => ({
  root: {
    fontSize: '14px',
    maxWidth: '60%',
    '&:nth-of-type(odd)': {
      backgroundColor: theme.palette.background.rowOdd,
      "& > .MuiTableCell-root": {
        color: theme.palette.font.rowOdd,
        padding: '2px',
        textAlign: 'left'
      }
    },
    '&:nth-of-type(even)': {
      backgroundColor: theme.palette.background.rowEven,
      "& > .MuiTableCell-root": {
        color: theme.palette.font.rowEven,
        padding: '2px',
        textAlign: 'left'
      }
    },

  },
}))(TableRow);

const useStyles = makeStyles({
  table: {
    minWidth: 100,
    width: '100%',
    borderCollapse: 'separate',
    borderSpacing: '0px 4px',
  },
});

function createData(flag,position, text,icon) {
  return { flag,position,text,icon };
}

const rows = [
  createData('Norway','20', ' Leprous - Running Low | Running Low | 2021', 'Starred' ),
  createData('Norway', '19', 'Leprous - Running Low | Running Low | 2021', 'Starred' ),
  createData('Norway', '18', 'Leprous - Running Low | Running Low | 2021', 'Starred' ),
  createData('Norway', '17', 'Leprous - Running Low | Running Low | 2021', 'Starred' ),

];



export default function ChartTable() {
  const classes = useStyles();

  return (
    <TableContainer component={"div"}>
      <Table className={classes.table} aria-label="charts table" >
        <TableBody>
          {rows.map((row) => (
            <StyledRow key={row.position} >
              <TableCell component="th" scope="row" style={{textAlign : 'right'}}>
                {row.position}
              </TableCell>
              <TableCell>{row.flag}</TableCell>
              <TableCell align="left">{row.text}</TableCell>
              <TableCell align="right">{row.icon}</TableCell>
            </StyledRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

and the relevant part of the theme:

palette: {
    background: {
      default: '#6C757D',
      container: '#202528',
      rowEven: '#E5E5E5',
      rowOdd: '#4F5356',
    },
    font: {
      rowEven: '#6C757D',
      rowOdd: '#FFFFFF'
    }
  }

Try setting `border: 0` if you don't need any borders. – Timur Sep 01 '21 at 21:50 — Timur, Sep 01 '21 at 21:50

score 2 · Answer 1 · answered Sep 01 '21 at 22:28

I managed to solve it. The issue was that TableCell predefined styles had higher precedence. So when I tried to set border: 0, I did at the table element, and it should have been done on TableCell.

Here is the code with the solution:

const StyledRow = withStyles((theme) => ({
  root: {
    fontSize: '14px',
    maxWidth: '60%',
    '&:nth-of-type(odd)': {
      backgroundColor: theme.palette.background.rowOdd,
      "& > .MuiTableCell-root": {
        color: theme.palette.font.rowOdd,
        padding: '2px',
        textAlign: 'left',
        borderBottom: 0
      }
    },
    '&:nth-of-type(even)': {
      backgroundColor: theme.palette.background.rowEven,
      "& > .MuiTableCell-root": {
        color: theme.palette.font.rowEven,
        padding: '2px',
        textAlign: 'left',
        borderBottom: 0
      }
    },

  },
}))(TableRow);

Strange line showing up under even rows in Table when applying border-collapse + border-spacing. Can't find the faulty property

1 Answers1