TableCell is not aligned with the value below

JavaScript
1

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>
2

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

Thank you.

3

I should post it in my previous post?

4

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.

5

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.

6

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

7

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

8

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

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.