How to remove borders from my react-table

Question

Here is my React.js component where I define my table using react-table, and some material-ui components next to the table:

import React from 'react'
import { useTable, useGlobalFilter, usePagination } from 'react-table'
import { makeGetRequest } from "../state/actions";
import PropTypes from "prop-types";
import { connect } from "react-redux";
//Material UI imports
import { styled } from '@mui/material/styles';
import Paper from '@mui/material/Paper';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
import TextField from '@mui/material/TextField';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';

const Item = styled(Paper)(({ theme }) => ({
  ...theme.typography.body2,
  padding: theme.spacing(1),
  textAlign: 'center',
  color: theme.palette.text.secondary,

}));

export const GlobalFilter = ({ filter, setFilter }) => {
  return (
    <span>
      <TextField 
        id="outlined-basic" 
        label="Search" 
        variant="outlined"
        size="small"
        value={filter || ''}
        onChange={e => setFilter(e.target.value)} />
    </span>
  )
}

function Table({ columns, data }) {

  const handleEntriesChange = (event) => {
    setPageSize(event.target.value);
  };
    
  // Use the state and functions returned from useTable to build your UI
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    page,
    pageOptions,
    state: { pageIndex, pageSize },
    previousPage,
    nextPage,
    canPreviousPage,
    canNextPage,
    setPageSize,
    state,
    setGlobalFilter,
    } = useTable(
        { columns, data, initialState: { pageSize: 10 }},
        useGlobalFilter, usePagination,
        )

  const { globalFilter } = state

  // Render the UI for your table
  return (
      <>
      <Box sx={{ minWidth: 120 }}>
          <InputLabel id="entries-label">Show Entries</InputLabel>
          <Select
            labelId="entries-label"
            id="entries-label"
            value={pageSize}
            label="Entries"
            onChange={handleEntriesChange}
          >
            <MenuItem value={10}>10</MenuItem>
            <MenuItem value={20}>20</MenuItem>
            <MenuItem value={50}>50</MenuItem>
            <MenuItem value={100}>100</MenuItem>
          </Select>
      </Box>
        <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter}/>
      <table {...getTableProps()}>
          <thead>
          {headerGroups.map(headerGroup => (
              <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
                  <th {...column.getHeaderProps({
                    style: {  minWidth: column.minWidth, width: column.width },
                    })}>
                    {column.render('Header')}
                  </th>
              ))}
              </tr>
          ))}
          </thead>
          <tbody {...getTableBodyProps()}>
          {page.map(row => {
              prepareRow(row)
              return (
              <tr {...row.getRowProps()}>
                  {row.cells.map(cell => {
                  return  <td  {...cell.getCellProps()}>
                            {cell.column.Header=='LOCKER' ?
                              cell.render('Cell')
                             : 
                              cell.render('Cell')} 
                          </td>
                  })}
              </tr>
              )
          })}
          </tbody>
      </table>
        <ButtonGroup aria-label="button group">
          <Button variant="outlined" onClick={() => previousPage()} disabled={!canPreviousPage}>Previous</Button>
          <Button variant="contained" >{pageIndex + 1}</Button>
          <Button variant="outlined" onClick={() => nextPage()} disabled={!canNextPage}>Next</Button>
        </ButtonGroup>
      </>
  )
}

function LockerListTable(props) {

  const columns = React.useMemo(
      () => [
        {
          Header: '#',
          accessor: 'id',
          width: 200,
          minWidth: 20
        },
        {
          Header: 'LOCKER',
          accessor: 'locker_name',
          width: 1000,
          minWidth: 100
        },
        {
          Header: 'LOCATION',
          accessor: 'location',
          width: 1000,
          minWidth: 100
        },
        ],[]
  )
  
    const data = React.useMemo(() => props.locker_list_data, [props])
  
  return (
      <Table columns={columns} data={data} />
  )
}

LockerListTable.propTypes = {
  locker_list_data: PropTypes.array.isRequired,
};

const mapStateToProps = (state, ownProps) => {
  return { locker_list_data: state.handleAPI.locker_list_data };
};

const mapDispatchToProps = (dispatch) => {
  return {
    makeGetRequest: (url, componentName) => dispatch(makeGetRequest(url, componentName)),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(LockerListTable);

I also made some custom CSS for the table, and as you can see my border is set to 'border:none':

.table{
    font-size: 13px;
    text-align: center;
    width: 100%;
    margin: auto;
}

table.table-bordered_low_stock > thead > tr > th{
    border: none;
    padding-top: 3px;
    padding-bottom: 3px;
}

tbody tr:nth-child(odd){
    background: #e0e0e0;
}

tbody tr:nth-child(even){
    background: #bdbdbd;
}

th {
  background-color: #343A40 ;
  color: white;
  
}

And here is a picture of my table

I just cant get the white border lines between the rows and columns in the tables to be removed. I have to tried a couple of methods found on stackoverflow but no luck yet, any advice?

Answer 1

Add the following to your table

.table {
  border-collapse: collapse;
}

Answer 2

for delete border in table juste use the border-collapse property in your table, like this:

.table{
    font-size: 13px;
    text-align: center;
    width: 100%;
    margin: auto;
    border-collapse: collapse;
}