CODEWITHSUNDEEP
cssreactjsmaterial-ui
Zonaahmmm
Zonaahmmm

Reputation: 65

How to remove the border around the entire table in Material-ui

I'm trying to edit a table in Material-ui and I don't want to show it as a card. I would like to remove the border around the entire table and I couldn't find anything about removing the border on the document page. Can anyone help me with it?

Link about the component: https://material-ui.com/components/tables/#other

Code:

import React from 'react';
import { withStyles, Theme, createStyles, 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 Paper from '@material-ui/core/Paper';

......

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

  return (
    <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="customized table">
        <TableHead>
          <TableRow>
            <StyledTableCell>Dessert (100g serving)</StyledTableCell>
            <StyledTableCell align="right">Calories</StyledTableCell>
            <StyledTableCell align="right">Fat&nbsp;(g)</StyledTableCell>
            <StyledTableCell align="right">Carbs&nbsp;(g)</StyledTableCell>
            <StyledTableCell align="right">Protein&nbsp;(g)</StyledTableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <StyledTableRow key={row.name}>
              <StyledTableCell component="th" scope="row">
                {row.name}
              </StyledTableCell>
              <StyledTableCell align="right">{row.calories}</StyledTableCell>
              <StyledTableCell align="right">{row.fat}</StyledTableCell>
              <StyledTableCell align="right">{row.carbs}</StyledTableCell>
              <StyledTableCell align="right">{row.protein}</StyledTableCell>
            </StyledTableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

Upvotes: 5

Views: 14531

Answers (2)

Prakhar
Prakhar

Reputation: 1485

The TableContainer is using Paper ( with default elevation ) as its background, which is why it is displaying like a card. Removing the component={Paper} part will remove those classes.

Use it like this

<TableContainer >

Upvotes: 6

Hyetigran
Hyetigran

Reputation: 1215

Add className to TableContainer component

 <TableContainer className={classes.tableContainer} component={Paper}>

Add custom style to useStyle hook

const useStyles = makeStyles({
  table: {
    minWidth: 650
  },
  tableContainer: {
    boxShadow: "none"
  }
});

My method: In codesandbox, I opened devtools and inspected the component until I found the tag. Because it was outermost layer, it seemed likely to be the TableContainer component.

Thus if you were to want to eliminate the bottom border, find which tag it's set and overwrite those components in the useStyle hook.

Upvotes: 3

Related Questions