如何在反应虚拟化表中的单元格之间绘制边界答案

【问题标题】：How to draw borders between cells in react-virtualized Table如何在反应虚拟化表中的单元格之间绘制边界
【发布时间】：2018-07-10 14:46:28
【问题描述】：

我正在使用来自react-virtualized 的Table 组件来呈现一个包含 1,000 行和 20 列的数据集。即使在阅读了Table 和Column 的文档并经过一些实验之后，我也无法在表格中的单元格之间绘制边界。来自react-virtualized 的带有边框的示例仅包括Grid 组件，例如Grid 和CellMeasurer。

它认为Grid 与似乎使用弹性框的Table 有不同的单元格实现？请注意，在下图中，Grid 中的单元格“内容”占据了整个单元格，而 Table 中只有一部分。

【问题讨论】：

标签： react-virtualized

【解决方案1】：

Table 组件使用 flexbox 布局，因此您仍然可以使用 flex 样式做您想做的事情。

例如，您可以指定rowStyle={{alignItems: "stretch"}}，以便列填充行的整个高度。然后如果你想垂直居中列文本，你可以指定一个Column prop style={{display: "flex", alignItems: "center"}}。

（当然，CSS 类也可以这样做。）

【讨论】：

【解决方案2】：

这应该或多或少地为您提供所需的东西，尽管这可能不是正确的覆盖方式。我昨天才开始使用 react-virtualized，所以我还在玩弄。

@border: 1px solid #D3D3D3;

.column() {
    align-items: center;
    border-right: @border;
    display: flex;
    flex: 1;
    height: 100%;
    min-width: 0;

    &:last-child {
        border-right: none;
    }
}

/*** Overrides for react-virtualized styles ***/
.ReactVirtualized__Table__Grid {
    background-color: white;
    border-bottom: @border;
    border-right: @border;
}
.ReactVirtualized__Table__headerColumn {
    .column();
}
.ReactVirtualized__Table__headerRow {
    background-image: linear-gradient(#fff, #efefef);
    border: @border;
    padding-right: 0 !important;
}
.ReactVirtualized__Table__row {
    border-bottom: @border;
    border-left: @border;
}
.ReactVirtualized__Table__rowColumn {
    .column();
}

【讨论】：