TableCell is not aligned with the value below

I have this color, quantity, and unit price. I created a blank table cell since there are 4 columns, but it does not still align with the values below. This is what it looks like:

image

Qty and the unit price are not aligned. How do I fix this?

Codesandbox: Add to Cart Sampled 2 - CodeSandbox

Codes:

 <TableContainer key={id + obj.color} component={Paper}>
              <Table aria-label="simple table">
                <TableHead>
                  <TableRow>
                    <TableCell>
                      Product Name: {obj.name + " " + obj.size}
                    </TableCell>
                    <TableCell align="center" colSpan={3}>
                      Details
                    </TableCell>
                  </TableRow>
                  <TableRow>
                    <TableCell>Color</TableCell>
                    <TableCell align="right">Qty.</TableCell>
                    <TableCell align="right"></TableCell>
                    <TableCell align="right">Unit Price</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {obj.nest.map((nest, idx) => (
                    <TableRow key={idx}>
                      <TableCell>{nest.color}</TableCell>
                      <TableCell>{nest.quantity}</TableCell>
                      <TableCell>
                        <IconButton
                          onClick={(e) =>
                            handleAdd(
                              nest.id,
                              nest.prodName,
                              nest.price,
                              nest.size,
                              nest.cat,
                              nest.color
                            )
                          }
                        >
                          <AddIcon color="success" />
                        </IconButton>

                        <IconButton onClick={() => handleRemove(nest)}>
                          <RemoveIcon />
                        </IconButton>
                      </TableCell>
                      <TableCell>
                        {Number(nest.quantity) * Number(nest.price)}
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </TableContainer>

Please do not create duplicate topics for the same challenge/project question(s).

Thank you.

I should post it in my previous post?

I’d pick one of your previous threads to become your thread about this project. That keeps all the context together so that it’s easier for others to answer questions.

I don’t understand your HTML structure and I’m not really sure how it is you want it to look. I would suggest you look at the examples in the mui docs and maybe check out MDN.

Ohh i didn’t know about that. Thank you for this, I’ll do this next time

Thank you, I’ll be checking this out as well

Hello, I tried to add another reply to my previous thread, it says that the topic has been solved since I’ve already accepted a solution. And one of it says that I should just create another topic