Visually grouping columns in a table

Flow
1

Hi,
I’m trying to style my vaadin app and now i have what are probabaly a bunch of css noob questions. But as Vaadin results in chunky html which makes styling a bit difficult and as i’m probably not the only programmer that has to do styling, i’ll ask them here anyway. Any kind of pointers would be appreciated.

Specifically i’m trying to visually group table columns. As colspan is not yet available in vaadin, i have a
in the column headers and i repeat part of it for ‘grouped’ columns. This is where i hit the first glitch. By setting:

v-table-header-wrap {
display:table-cell;
}
.v-table-header {
display:table-cell;
}

i can display both lines in the table header contents but the .v-table-resizer remains the same size unless i ‘hard code’ the height. (And when i do, up and down arrows are displayed in the header?)

Then, i would somehow like to group the columns in the table body. Either by drawing vertical borders between columns that are not in the same ‘group’ or by alternating the background color. I would prefer the former because i think i may be easier on the eyes.
The problem is that when i set a style using a GeneratedColumn, that style is on the div which is in the div which is in the td. So when i set the right border to solid black, the line does not run along the entire column but every cell in that column ends with a short vertical black line.

Thanks

Ivana

2

Hi,

If I understood correctly, you need to set the height of the table header taller, right?

Setting the display property to table-cell really isn’t doing any good, and makes the rendering probably slower. In stead, set the height of both of the elements to “auto”.

For the resizer, there’s really no easy way other than hardcoding the height. The arrows that become visible in that case, are the sort arrow images from
the Reindeer theme sprite
, that is being overflown since the bounding element becomes larger than intended. You can overcome that by specifying the background of the v-table-header-wrap element yourself, overriding the sprite image.

The table column separators are also a bit tricky, since you will need to override all the padding values for the cells in order for the cell content to start from the edges. This will also need to be reflected in the table header cell paddings (the combination of the resizer and other paddings need to match the content cell paddings horizontally), otherwise resizing the columns will behave unexpectedly. This is a really borked situation, and needs to be fixed. You can read the documentation for tables styling from the
base themes table.css
 (right in the beginning of the file).

HTH,
Jouni

3

Hi Jouni ,

Thanks for your answer, i cannot believe i overlooked it all this time.

Anyway, the header looks ok, setting the height to “auto” works nicely and i had indeed overridden the sprite image with a color background.
I have fiddled endlessly with the cellpadding, but all i do really just makes a mess both of the css and table on screen. So instead i’m going to opt for changing the background color with a CellStylegenerator.

Ivana

4

Is it possible to add more then one style to the table cell?
If i set more then one CellstyleGenerator, only the last is actually added. If generated columns cannot have a CellStyleGenerator, i dont see how to add more then one style class to the

EDIT: CellStyleGenerator works for generated columns too. It was this
forum post
 that sugested otherwise, but this is no longer the case.