gwt - GWT - Flex Table Fixed Header Doesn't Match Data Columns

Question

I'm using two flex tables. One for header and one for data.
The one for data is wrapped with a scroll panel.
The size of my columns is presented with percentage and this is where my problem begins:
I set the width of both tables to 100%.
The thing is that the scrollbar isn't always visible. It's visible only when required.
So when the scrollbar is shown - there's a gap between the width of the header and the width of the data area inside the scrollpanel. (since the scrollbar itself has width of 16px)
This way, the titles of the columns, doesn't match precisely the data columns.

Any suggestions?
Thanks in advance!

Answer 1

您可以做很多事情来保持列同步，但其中大多数需要活动布局和/或预览调整大小事件。

我想，对于您的用例，它更简单并且（性能方面）要快得多：

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

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

Answer 2

根据您对我的其他答案的评论，您必须编写代码。我过去通过使用 shim 列解决了这类问题。我不会称它为优雅，但它确实成功了。基本上，您在标题的末尾有一个额外的列，用作滚动条的垫片。显示滚动条时，shim 列将显示滚动条的确切宽度。当没有滚动条时，您会隐藏 shim。

1. 使用附加列设置布局。随心所欲地设计它。我通常会这样做，以便它与相邻的列融合在一起，这样用户在显示时就不会看到一个小方块。

2. 像往常一样将所有数据行添加到内容表中。确保将内容表及其所有 tr/td 添加到 DOM。

3. 添加数据后，测试滚动条是否可见。您可以通过检查滚动高度是否大于偏移高度来做到这一点。

   ScrollPanel scrollPanel;
   Element scrollElem = scrollPanel.getElement();
   
   if (scrollElem.getScrollHeight() > scrollElem.getOffsetHeight()) {
       // scrollbar is visible
   }
   

4. 如果显示滚动条，则显示您的 shim 列，否则隐藏它。

   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);
   }
   

5. 确定 shim 列的宽度，使其与滚动条的宽度相匹配。如果您查看下面的方法，您可以看到它是如何做到的。

   // calculate the width of the scrollbar for the given browser
   int shimWidth = AbstractNativeScrollbar.getNativeScrollbarWidth();
   

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

Answer 3

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

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

jsfiddle 示例

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>