CODEWITHSUNDEEP
reactjsmaterial-ui
AlainIb
AlainIb

Reputation: 4708

Material Ui table reduce the space between columns

I have a table created with ReactJs & Material Ui like the code below.

Her a live test: https://codesandbox.io/s/material-demo-692nz?file=/demo.js

I want to reduce the space between columns, there is always big space after first column no matter how many columns i add after it. It's like they have some 'space-between' style but cannot remove it.

enter image description here

Any tips ? thank you

import React from "react";
import { 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";

const useStyles = makeStyles({
  table: {
    minWidth: 50
  }
});

function createData(name, calories, fat, carbs, protein) {
  return { name, calories, fat, carbs, protein };
}

const rows = [
  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)
];

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

  return (
    <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell align="left">Dessert (100g serving)</TableCell>
            <TableCell align="left">Calories</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map(row => (
            <TableRow key={row.name}>
              <TableCell component="th" scope="row">
                {row.name}
              </TableCell>
              <TableCell align="left">{row.calories}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

Upvotes: 2

Views: 11373

Answers (1)

keikai
keikai

Reputation: 15146

Using inline-style, add width to <TableCell /> under <TableHead /> would be fine

<TableCell align="left" style={{width: 200}}>Dessert (100g serving)</TableCell>

enter image description here

Update:

There are multiple ways to define the width style

style={{width: '20vw'}}

or

style={{minWidth: 200}}

may work for the style requests.

Upvotes: 3

Related Questions