Vaadin - 删除表格中的单元格边框

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

我在Vaadin的帮助下在Eclipse中创建了一个表。

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

有没有办法隐藏所有的细胞边界?还有额外的奖励,是否可以给第一个单元格(带有“Gebruiker”的单元格)颜色#F4F4F4和第二个单元格(文本框)颜色#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:

formlayout会很好,但我似乎无法使背景颜色有效,所以我回到了表格。这是代码:

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 ;
}

1 个解决方案

#1

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

假设cfrick的评论的答案是否定的,看起来它取决于你正在使用的主题:

• 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.

如果它是valo(推荐有几个原因并且从截图中看起来你已经在使用它但不是100%肯定的话)那么还有另外两种风格,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:

P.S。:鉴于您正在进行实验,如果您正在使用Vaadin 7.2+版本,请查看对字体图标的支持,这些图标有时会非常方便,例如嵌入式FontAwesome: