使用 react-bootstrap 组件对表格中的单元格进行样式设置答案

【问题标题】：Styling cells in table with react-bootstrap components使用 react-bootstrap 组件对表格中的单元格进行样式设置
【发布时间】：2022-01-08 19:44:02
【问题描述】：

我正在渲染一个表格，其中每个单元格对应于 react-bootstrap 的一个 Button 组件。

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

问题在于它呈现的按钮未使用所选颜色：variant="warning"，但只有边框是该颜色。还有另一个问题：每个单元格的底部边框根本没有呈现，所以看起来很明显有些东西覆盖在其他东西上，但我不知道为什么。

这样的 CSS 似乎不起作用：

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

.td-style {
  margin: 5px ;
}

【问题讨论】：

分享这些类的代码below-nav table-style
为什么要用<Button> 包裹<td>？
移除borderless以显示底部边框

标签： css reactjs react-bootstrap react-component react-table

【解决方案1】：

您正在用<Button> 包装<td>，这不是使用表格的正确方法。它应该是这样工作的：

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

一张表的基本DEMOhttps://codesandbox.io/s/serene-knuth-qhpuu?file=/src/App.js

【讨论】：