Vaadin - remove cell borders in table - html

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";
}
}
});
P.S.: 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: