反应表双滚动条顶部和底部

Question

我已经在表格底部有水平线，我的问题是，如果表格上的数据太多，我如何在表格标题的顶部添加另一个滚动条？ 谢谢！

<BTable 
    id="project-table" 
    striped 
    bordered 
    hover 
    size="md" 
    {...getTableProps()} 
    style={{
        overflowX: 'scroll !important',
        whiteSpace: 'nowrap',
    }}
    >
    <thead>
    {headerGroups.map(headerGroup => (
    <tr {...headerGroup.getHeaderGroupProps()}>
        {headerGroup.headers.map(column => (
        <th {...column.getHeaderProps()}>
            {column.render('Header')}
        </th>
        ))}
    </tr>
    ))}
    </thead>
    <tbody>
    {page.map((row, i) => {
    prepareRow(row)
    return (
        <tr {...row.getRowProps()}>
        {row.cells.map(cell => {
            return (
            <td {...cell.getCellProps()}>
                {cell.render('Cell')}
            </td>
            )
        })}
        </tr>
    )
    })}
    </tbody>
</BTable>

Answer 1

只需在样式中添加 overflow-y: 'scroll'