Styling cells in table with react-bootstrap components

Question

I'm rendering a table in which each cell corresponds to a Button component of react-bootstrap.

<>
        <Table borderless className='below-nav table-style' responsive="sm">
            
            <tbody>
                {Array.from({ length: rows }).map((_, row_index) => (
                    <tr key={row_index}>
                        {Array.from({ length: columns }).map((_, column_index) => (
                            <Button className="td-style button-style"  variant="warning">
                            <td  key={column_index}>
                                ciao
                            </td>
                            </Button>
                        ))}
                    </tr>
                ))}
            </tbody>
        </Table>
    </>

The problem is that it renders buttons that are not fulfilled with the color selected: variant="warning", but just the border is of that color. There is another issue: bottom-border of each cell is not rendered at all so it seems clearly that something is overlayed on something else but i don't know why.

CSS like this seems not to work:

.table-style {
  border-collapse: separate;
  border-spacing: 1px ;
  border-width: 1px;
}

.td-style {
  margin: 5px ;
}

Share the code of these classes below-nav table-style

Usiel
– Usiel

2022-01-08 21:30:12 +00:00
Commented Jan 8, 2022 at 21:30 — Usiel
– Usiel, Commented Jan 8, 2022 at 21:30
Why do you wrap the <td> with the <Button>?

Usiel
– Usiel

2022-01-08 21:32:12 +00:00
Commented Jan 8, 2022 at 21:32 — Usiel
– Usiel, Commented Jan 8, 2022 at 21:32
Remove borderless to show the bottom border

Usiel
– Usiel

2022-01-08 21:42:10 +00:00
Commented Jan 8, 2022 at 21:42 — Usiel
– Usiel, Commented Jan 8, 2022 at 21:42

Usiel · Accepted Answer · 2022-01-08 21:51:04Z

1

You are wrapping the <td> with the <Button>, this is not the correct way to use a table. This is how it should work:

<>
        <Table responsive="sm">
            
            <tbody>
                {Array.from({ length: rows }).map((_, row_index) => (
                    <tr key={row_index}>
                        {Array.from({ length: columns }).map((_, column_index) => (
                            <td  key={column_index}>
                              <Button variant="warning">
                                ciao
                              </Button>
                            </td>
                            
                        ))}
                    </tr>
                ))}
            </tbody>
        </Table>
    </>

Basic DEMO of a table https://codesandbox.io/s/serene-knuth-qhpuu?file=/src/App.js

answered Jan 8, 2022 at 21:51

Usiel

7295 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Styling cells in table with react-bootstrap components

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related