Table width 100%, but horizontal scrollbar needed


I have a Panel with a HorizontalLayout inside and, inside that HorizontalLayout, i have 2 side-by-side Tables. The idea is to have a Twin Column Select that supports drag-and-drop. For now, i force both Tables to have each only 1 column, which contains the ‘captions’ of the elements of the Table to really make it look like the native TwinColSelect component that Vaadin uses.

Now, because these 2 tables have to have the same width, even if one of them does not contain any elements, i set the width of the Tables to 100% (also the HorizontalLayout has 100% width) .
The issue that i have now, is that, in some cases, the tables contains rows with very ‘wide’ captions, so that they don’t fit in the 1 column of the Table and because the Table is set to 100% width, no horizontal scrollbar appears. Only when you resize the column manually (by ‘grabbing’ the right edge of the column header and pulling it to the right), a horizontal scrollbar appears. Would it be possible to make the column as large as the largest element in the Table, without sacrificing the 100% width of the Table (because that would look ugly when one or both Tables contain smaller captions or even no elements)?

I know similar questions has been posted on this forum, but i could not found the required answer on it…

Kind regards,


I can’t come up with a solution that would get the expected behavior your are looking for, when it is done with a table. Columns tend to try to readjust their sizes accordingly to their content, but I don’t think that one column will readjust itself over 100% of the table’s width.

Correct me if I’m wrong but it doesn’t sound that you are using very much of the table’s features here. Could you possibly replace them with panels? You could either have themed buttons or clickable layouts inside the panel, set the button’s width to undefined and have the panels width as 100%. It should make the scrolling work the way you want it, and you can do a lot of visual magic with css. It just requires a bit of work to implement.

Not a bad idea. although it would definitely be quite some implementation work.
It’s true that i’m not using that many features of a Table, but things like multiselect (with functionality like CTRL+click and SHIFT+click) is not something that i would like to ‘re-invent’ using Buttons in a Panel layout…

Yeah, multi select would be hard to implement. Have you tested how the other component’s work, like listselect? Starting to tweak the client side of the table is a daunting task.

Quick suggestion (didn’t try this): use Labels inside the table and not just Strings, and set the width of the Labels to undefined. Or set the width of the Labels to 0.6em x the length of the caption.

Brilliant! Using a Label with undefined size did the trick. Thanks!!!