Vaadin - remove cell borders in table

Question

I have created a table in Eclipse with the help of Vaadin.

I managed to remove the borders of the table with following line:

tblResetButton.addStyleName(Reindeer.TABLE_BORDERLESS) ;

but this still leaves me with a vertical line like this:

Is there a way to hide all the cell borders? And an extra bonus, would it be possible to give the first cell (the one with "Gebruiker") the color #F4F4F4 and the second cell (the textbox) the color #E2E2E2

---

EDIT:

the formlayout would be good, but I can't seem to get the background colors working so I reverted to the tables. This is the code:

JAVA

tblReset.addContainerProperty("Gebruiker", String.class, null);

tblReset.setCellStyleGenerator(new Table.CellStyleGenerator() {
            @Override
            public String getStyle(Table source, Object itemId, Object propertyId) {
                if("Gebruiker".equals(propertyId)){
                    return "style-name-with-black-background";
                } else {
                    return "style-name-with-yellow-background" ;
                }
            }
        });

CSS

.style-name-with-black-background {
    background-color: black ;
}

.style-name-with-yellow-background {
    background-color: yellow ;
}

Answer 1

Supposing the answer to cfrick's comment is no, looks like it depends on what theme you're using:

• If it's valo ( recommended for a few reasons and from the screenshot seems like you're already using it but not 100% sure) then there are 2 other styles, ValoTheme.TABLE_NO_VERTICAL_LINES & ValoTheme.TABLE_NO_HORIZONTAL_LINES .
• In reindeer they seem to be missing so you'll probably have to manually define custom style(s) in your theme . See below a simple/naive attempt:

add the style to the table

table.setStyleName("no-vertical-lines-or-border");

while defining it in your theme

  .v-table-no-vertical-lines-or-border .v-table-header-wrap /* remove header-table borders */,
  .v-table-no-vertical-lines-or-border .v-table-body /* remove body-table borders */,
  .v-table-no-vertical-lines-or-border .v-table-cell-content /* remove cell borders */ {
    border: none;
  }

As for the cells, you can use a style generator , again with your custom defined styles for each cell, something along the lines of:

    table.setCellStyleGenerator(new Table.CellStyleGenerator() {
        @Override
        public String getStyle(Table source, Object itemId, Object propertyId) {
            if("description".equals(propertyId)){
                return "style-name-with-F4F4F4-background";
            } else {
                return "style-name-with-E2E2E2-background";
            }
        }
    });

PS: Given that you're experimenting, and if you're working with Vaadin versions 7.2+, take a look at the support for font icons which may come in very handy at times, for example the embedded FontAwesome :