title: How to style a Material UI table in ReactJS so that the header and table body are evenly spaced?
body: <p>I'm building a custom table component in ReactJS for one of my projects. Although all tables share the same 5 columns, the content in each of the tables varies a lot. With this said, I also needed a few other features such as a scrollbar for larger tables that overflow as well as a sticky header for these cases.</p>
  <p>In order to implement the sticky header and scrollbar without having the scroll bar on the header as well, I had to use two of the material UI 'Table' components inside of a wrapper, one for the header and one for the table body. A screenshot of this and my code for this component is attached below.</p>
  <p><a href="https://i.stack.imgur.com/j7eRC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/j7eRC.png" alt="table component" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><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';
  import './CustomTable.css';
  import TableHeader from './TableHeader';
  
  const StyledTableCell = withStyles((theme: Theme) =&gt;
    createStyles({
      head: {
        backgroundColor: '#533cf8',
        color: theme.palette.common.white,
        fontSize: 11,
      },
      body: {
        fontSize: 10,
      },
    }),
  )(TableCell);
  
  const StyledTableRow = withStyles((theme: Theme) =&gt;
    createStyles({
      root: {
        '&amp;:nth-of-type(odd)': {
          backgroundColor: theme.palette.action.hover,
        },
      },
    }),
  )(TableRow);
  
  const useStyles = makeStyles({
    main: {
      width: '600px',
      marginRight: 'auto',
      marginBottom: '25px',
      marginLeft: '25px',
      borderRadius: '8px',
      overflowX: 'hidden',
    },
  });
  
  interface Row {
    id: number;
    parameters: string;
    required: string;
    description: string;
    defaults: string;
    type: string;
  }
  
  export interface TableProps {
    rows: Row[];
  }
  
  export default function CustomTable({ rows }: TableProps): JSX.Element {
    const classes = useStyles();
  
    return (
      &lt;div
        className={classes.main}
        style={{
          borderRight: '0.3px solid lightgray',
          borderLeft: '0.3px solid lightgray',
        }}
      &gt;
  
        &lt;Table aria-label="customized-table" size="medium"&gt;
          &lt;TableHead style={{ position: 'sticky', top: 0 }}&gt;
            &lt;TableRow&gt;
              &lt;StyledTableCell
                align="left"
                style={{
                  borderRadius: '8px 0px 0px 0px',
                }}
              &gt;
                Parameters
              &lt;/StyledTableCell&gt;
              &lt;StyledTableCell align="left"&gt;Required&lt;/StyledTableCell&gt;
  
              &lt;StyledTableCell align="left"&gt;Description&amp;nbsp;&lt;/StyledTableCell&gt;
              &lt;StyledTableCell align="left"&gt;Defaults&amp;nbsp;&lt;/StyledTableCell&gt;
              &lt;StyledTableCell
                align="left"
                style={{ borderRadius: '0px 8px 0px 0px' }}
              &gt;
                Type&amp;nbsp;
              &lt;/StyledTableCell&gt;
            &lt;/TableRow&gt;
          &lt;/TableHead&gt;
        &lt;/Table&gt;
        &lt;TableContainer
          component={Paper}
          elevation={0}
          style={{
            maxHeight: '400px',
            overflowX: 'hidden',
          }}
          className="table"
        &gt;
          &lt;Table
            aria-label="customized-table"
            style={{ borderRadius: '0px 0px 8px 8px' }}
            size="medium"
          &gt;
            &lt;TableBody&gt;
              {rows &amp;&amp;
                rows.map((row) =&gt; (
                  &lt;StyledTableRow key={row.id}&gt;
                    &lt;StyledTableCell component="th" scope="row" align="left"&gt;
                      {row.parameters}
                    &lt;/StyledTableCell&gt;
                    &lt;StyledTableCell align="left"&gt;{row.required}&lt;/StyledTableCell&gt;
                    &lt;StyledTableCell align="left"&gt;
                      {row.description}
                    &lt;/StyledTableCell&gt;
                    &lt;StyledTableCell align="left"&gt;{row.defaults}&lt;/StyledTableCell&gt;
                    &lt;StyledTableCell align="left"&gt;{row.type}&lt;/StyledTableCell&gt;
                  &lt;/StyledTableRow&gt;
                ))}
            &lt;/TableBody&gt;
          &lt;/Table&gt;
        &lt;/TableContainer&gt;
      &lt;/div&gt;
    );
  }</code></pre>
  </div>
  </div>
  </p>
  <p>I've tried to fix this by manipulating the CSS styles for each of the StyledTableCells. I've tried adjusting width for each Cell, but since the data changes so much this has not proven very consistent. I think that this might be the result of MaterialUI defaults.</p>
  <p>Any suggestions are appreciated! Thank you!</p>