react-table 默认高度问题和自适应样式

Question

我正在使用带有可滚动列的 react-table 和 header - 类似于 https://codesandbox.io/s/kowzlm5jp7?file=/index.js:281-310

我在table中设置了样式中的高度，如

        <ReactTableFixedColumns
            showPagination={false}
            defaultPageSize={selectedItemsLength}
            data={selectedItems}
            style={{height: "73vh"}}
            className="-striped -highlight"
            columns={[

所以当我 select 只有 1 或 2 个项目 table 时的问题看起来很紧张

当我使用 73vh - 它看起来不错，但仅在我的屏幕上 (ubuntu chrome) 并且当我 select 超过 10-15 个项目时。如果更少 - 它被拉伸。

chrome 或 Mac 上的 safari 由于某种原因没有可见的滚动条。

我真的很困惑 table，是否有任何解决方案可以让 react-table 在许多设备上看起来很漂亮，或者至少不会拉伸 1 或 2 个项目？

感谢任何人的友好回复

Answer 1

我抗拒了

的拉伸

    .ReactTable .rt-thead {
    flex: none !important;
}

.ReactTable .rt-tr {
    flex: none !important;
}

.ReactTable .rt-tr-group {
    flex: none !important;
}

仍然不知道如何让 table 在 mac 和 ubuntu 上看起来很漂亮 - 我应该设置什么高度

react-table 默认高度问题和自适应样式

react-table default height issue and adaptive styling

css

reactjs

react-table