How to render table correctly when TableHead and TableBody are in two different section?

Question

I have to render a table with tableHead and tableBody are in different section. I want them have the same width with every column. Can I do that?

<Table container aria-label="simple table">
  <TableHead>
    <TableRow>
      <TableCell>
        <span className={classes.headerTableText}>
        ID
        </span>
      </TableCell>
      <TableCell align="center">
        <span className={classes.headerTableText}> Name </span>
      </TableCell>
      <TableCell> Name</TableCell>
    </TableRow>
  </TableHead>
</Table>

<Table>
  <TableBody>
    <TableRow hover>
      <TableCell>
        <span>1</span>
      </TableCell>
      <TableCell align="center">
        <span>Me</span>
      </TableCell>
      <TableCell align="right">
        <span>U</span>
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

Answer 1

For Material-UI tables padding-right and padding-left of every table cell should be changed

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } 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 TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

const styles = theme => ({
  root: {
    display: 'flex',
    marginTop: theme.spacing.unit * 3,
    overflowX: 'hide',
  },
  table: {
    minWidth: 340,
  },
  tableCell: {
    paddingRight: 4,
    paddingLeft: 5
  }
});

let id = 0;
function createData(name, calories, fat, carbs, protein) {
  id += 1;
  return { id, name, calories, fat, carbs, protein };
}

const data = [
  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
  createData('Eclair', 262, 16.0, 24, 6.0),
  createData('Cupcake', 305, 3.7, 67, 4.3),
  createData('Gingerbread', 356, 16.0, 49, 3.9),
];

function SimpleTable(props) {
  const { classes } = props;

  return (
    <Paper className={classes.root}>
      <Table className={classes.table}>
        <TableHead>
          <TableRow>
            <TableCell className={classes.tableCell}>Dessert (100g serving)</TableCell>
            <TableCell numeric className={classes.tableCell}>Calories</TableCell>
            <TableCell numeric className={classes.tableCell}>Fat (g)</TableCell>
            <TableCell numeric className={classes.tableCell}>Carbs (g)</TableCell>
            <TableCell numeric className={classes.tableCell}>Protein (g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {data.map(n => {
            return (
              <TableRow key={n.id}>
                <TableCell component="th" scope="row" className={classes.TableCell}>
                  {n.name}
                </TableCell>
                <TableCell numeric className={classes.tableCell}>{n.calories}</TableCell>
                <TableCell numeric className={classes.tableCell}>{n.fat}</TableCell>
                <TableCell numeric className={classes.tableCell}>{n.carbs}</TableCell>
                <TableCell numeric className={classes.tableCell}>{n.protein}</TableCell>
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
    </Paper>
  );
}

SimpleTable.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(SimpleTable);

To make it responsive you need to use Grid system in the first place, For example this is grid system for full-page:

Answer 2

You can calculate the width of one of the table columns, and then send that width value to the other one as props.

You can also use hooks to manage the width of the columns and sync both tables.