我正在渲染一個表格，其中每個單元格對應于 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>
</>
問題是它渲染的按鈕沒有使用 selected: 的顏色variant="warning"，但只有邊框是那種顏色。還有另一個問題：每個單元格的底部邊框根本沒有呈現，所以看起來很明顯有些東西覆寫在其他東西上，但我不知道為什么。
像這樣的 CSS 似乎不起作用：
.table-style {
border-collapse: separate;
border-spacing: 1px ;
border-width: 1px;
}
.td-style {
margin: 5px ;
}
uj5u.com熱心網友回復：
您的包裹<td>用的<Button>，這是不使用一個表中的正確途徑。這是它應該如何作業的：
<>
<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>
</>
一張表的基本DEMO https://codesandbox.io/s/serene-knuth-qhpuu?file=/src/App.js
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/406682.html
標籤：
上一篇：CSS影片持續時間和速度