[Table] Footer CSS style

Vaadin 6 / 7 / 8 Framework UI
1

Hi :slight_smile:

I need to change the footer style of a Table. The first column (or element) footer needs to be left aligned while others columns need to be right aligned.

I found the CSS class v-table-footer-container and I override it with:

.v-table-footer-container {
   text-align: right;
}

But of course, the first footer element is also right aligned… So how can I do this?

Thank you.

2

Are the contents of the table also right aligned in the table columns? In that case, you could try using Table.setColumnAlignment.

3

OK I tried. It works but my column header is also right aligned. I’m not familiar with CSS rules but I think I can’t override the header style because when I use Table.setColumnAlignement it adds the “text-align: right” rule directly into the element style.

I found an other solution with CSS rules:

.v-table-footer-container {
   text-align: right;
}

td:first-child div[class="v-table-footer-container"]
 {
   text-align: left;
}

What do you think?

4

The CSS is good, but won’t work in IE6 since it doesn’t support the :first-child selector. And you could simplify the selector also for other browsers, so it’s faster to parse (the dot is the same as the class-attribute selector):

td:first-child .v-table-footer-container {
   text-align: left;
}
5

OK, thank you Jouni for the tip. I don’t have to support IE6 for this application but thanks for the advice.

Have a nice day.

Jachen.