Styling cells in table with react-bootstrap components - css

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 ;
}

Answer 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