Question

我正在使用两个flex表。一个用于标题，一个用于数据数据的一个用滚动面板包裹我的列的大小以百分比表示，这是我的问题开始的地方：
我将两个表的宽度设置为100％问题是滚动条并不总是可见的。只有在需要时它才可见因此，当显示滚动条时 - 标题的宽度与滚动面板内数据区域的宽度之间存在间隙。（因为滚动条本身的宽度为16px）
这样，列的标题与数据列的精确匹配。

有什么建议吗？提前谢谢！

Answer 1

您可以采取许多措施来保持列同步，但大多数都需要有效的布局和/或预览调整大小事件。

我想，对于你的用例来说，更简单且（性能明智）要快得多：

缩小两个表格，以便始终容纳滚动条的空间（甚至可以删除滚动条，保持滚动行为功能）。这两种解决方案通常都是通过使用一对嵌套的div实现的，第二种解决方案通常使用足够大的内容来隐藏/容纳滚动条;
将第二个表格包装到一个面板中，该面板在溢出时不会缩小内容。在GWT中，您可以使用CustomScrollPanel（而不是ScrollPanel）本机地执行此操作。请注意，这是一个RequiresResize面板，需要一个中断的ProvidesResize容器链或一个明确的大小。

附注：如果您需要在跨浏览器解决方案中计算本机滚动条的大小，只需使用AbstractNativeScrollbar.getNativeScrollbarHeight()（和/或宽度1）。

Answer 2

这种避免复杂代码和布局的常见技巧是简单地修复除最后一列之外的所有列的宽度。最后一列将自动调整，您根本不必担心滚动条。

这是一个jsfiddle示例以及一些示例html / css来向您展示我的意思。需要注意的是，除了最后一列之外，所有列都必须具有宽度（它们不能是百分比）。

jsfiddle example

<强> CSS：

.container {
    width: 500px;
    border: 1px solid red;
}

.content-wrapper {
    overflow: auto;
    height: 75px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

col {
    width: 100px;
}

col:last-child {
    width: auto;
}

.container td {
    border: 1px solid green;
}

<强> HTML：

<div class="container">
    <div class="header-wrapper">
        <table class="header">
            <colgroup>
                <col/>
                <col/>
                <col/>
                <col/>
                <col/>
            </colgroup>
            <tr>
                <td>Column A</td>
                <td>Column B</td>
                <td>Column C</td>
                <td>Column D</td>
                <td>Column E</td>
            </tr>
        </table>
    </div>
    <div class="content-wrapper">
        <table class="content">
            <colgroup>
                <col/>
                <col/>
                <col/>
                <col/>
                <col/>
            </colgroup>
            <tr>
                <td>Row 1/A</td>
                <td>Row 1/B</td>
                <td>Row 1/C</td>
                <td>Row 1/D</td>
                <td>Row 1/E</td>
            </tr>
            <tr>
                <td>Row 2/A</td>
                <td>Row 2/B</td>
                <td>Row 2/C</td>
                <td>Row 2/D</td>
                <td>Row 2/E</td>
            </tr>
            <tr>
                <td>Row 3/A</td>
                <td>Row 3/B</td>
                <td>Row 3/C</td>
                <td>Row 3/D</td>
                <td>Row 3/E</td>
            </tr>
            <tr>
                <td>Row 4/A</td>
                <td>Row 4/B</td>
                <td>Row 4/C</td>
                <td>Row 4/D</td>
                <td>Row 4/E</td>
            </tr>
            <tr>
                <td>Row 5/A</td>
                <td>Row 5/B</td>
                <td>Row 5/C</td>
                <td>Row 5/D</td>
                <td>Row 5/E</td>
            </tr>
        </table>
    </div
</div>

Answer 3

根据您在其他答案中的评论，您需要进行编码。我过去通过使用垫片柱解决了这类问题。我不会称之为优雅，但它确实做到了。基本上，您的标题末尾有一个额外的列，用作滚动条的垫片。当显示滚动条时，将显示具有滚动条精确宽度的垫片列。如果没有滚动条，则隐藏垫片。

使用附加列设置布局。无论你想要它的风格。我通常会把它与相邻的列混合在一起，这样用户在显示时就看不到一个小方块。
像往常一样将所有数据行添加到内容表中。确保将内容表及其所有tr / td添加到DOM中。

添加数据后，测试滚动条是否可见。您可以通过检查滚动高度是否大于偏移高度来执行此操作。

ScrollPanel scrollPanel;
Element scrollElem = scrollPanel.getElement();

if (scrollElem.getScrollHeight() > scrollElem.getOffsetHeight()) {
    // scrollbar is visible
}

如果显示滚动条，则显示您的填充栏，否则将其隐藏。

if (scrollElem.getScrollHeight() > scrollElem.getOffsetHeight()) {
    // scrollbar is visible - show shim column
    shimColumnTD.getStyle().setDisplay(Display.BLOCK);
}
else {
    // scrollbar not visible - hide shim column
    shimColumnTD.getStyle().setDisplay(Display.NONE);
}

确定垫片列的宽度，使其与滚动条的宽度相匹配。如果您查看下面的方法，您可以看到它是如何做到的。
```
// calculate the width of the scrollbar for the given browser
int shimWidth = AbstractNativeScrollbar.getNativeScrollbarWidth();
```

显然，这只是假的，但它应该引导你朝着正确的方向前进。祝你好运......

GWT - Flex表固定标头与数据列不匹配

3 个答案: