-2

Let me start by saying I am very new to JavaScript and React. I am making a page that has a title and a MUI table underneath it which currently looks like this:

Enter image description here

However, I want to add space between the title and the table, but I can't figure out how to.

This is what the code looks like:

return (
    <div className="dates" >
        <div>
        <h1 style={{ fontSize: 40 }}>Upcoming Import Dates</h1>
        </div>
        <div>
            <TableContainer component={Paper} style={{ width: 900, backgroundColor: "#dbdbdb"}}>
            <Table>
            <TableHead>
                <TableRow >
                <TableCell align="left" style={{ width: 200 }}>Date</TableCell>
                <TableCell align="left">Time</TableCell>
                <TableCell align="left">Event</TableCell>
                <TableCell align="left" style={{ width: 350 }}>Location</TableCell>
                </TableRow>
            </TableHead>
            <TableBody>
                {dates.map((dates) => (
                <TableRow key={dates.number}>
                    <TableCell align="left">{dates.EventDate}</TableCell>
                    <TableCell align="left">{dates.StartTime}</TableCell>
                    <TableCell align="left">{dates.Description}</TableCell>
                    <TableCell align="left">{dates.Location}</TableCell>
                </TableRow>
                ))}
            </TableBody>
            </Table>
            </TableContainer>
        </div>
   </div>
 );

I have tried adding margin-bottom to a css class and adding it to the div, but that did not work. I've looked online and can't seem to find anything so any help would be appreciated.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
marcm32
  • 1
  • 3
  • what element did you gibe margin-bottom? – Abdelrahman Khallaf Jul 09 '23 at 07:59
  • Adding margins is trivially easy, so you probably were applying the class name incorrectly to the element. You might have misspelled the class, or you aren't importing the CSS properly, or something else. Use Chrome's debugging tools to inspect which classes and styles are applied to which elements. This question will be closed unless you can provide more specific details as to what "did not work" means. – Andy Ray Jul 09 '23 at 08:03

1 Answers1

1

If you just add marginBottom: "100px" to your h1 like this:

return (
    <div className="dates" >
        <div>
        <h1 style={{ fontSize: 40, marginBottom: "100px" }}>Upcoming Import Dates</h1>
        </div>
        <div>
            <TableContainer component={Paper} style={{ width: 900, backgroundColor: "#dbdbdb"}}>
            <Table>
            <TableHead>
                <TableRow >
                <TableCell align="left" style={{ width: 200 }}>Date</TableCell>
                <TableCell align="left">Time</TableCell>
                <TableCell align="left">Event</TableCell>
                <TableCell align="left" style={{ width: 350 }}>Location</TableCell>
                </TableRow>
            </TableHead>
            <TableBody>
                {dates.map((dates) => (
                <TableRow key={dates.number}>
                    <TableCell align="left">{dates.EventDate}</TableCell>
                    <TableCell align="left">{dates.StartTime}</TableCell>
                    <TableCell align="left">{dates.Description}</TableCell>
                    <TableCell align="left">{dates.Location}</TableCell>
                </TableRow>
                ))}
            </TableBody>
            </Table>
            </TableContainer>
        </div>
   </div>
 );

it works fine. So there is definitely something wrong with a class that you've added or you put it in a wrong place.

Mickey
  • 51
  • 3