Question

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

我设法使用以下行删除表格的边框：

tblResetButton.addStyleName(Reindeer.TABLE_BORDERLESS) ;

但是这仍然留下了这样的垂直线：

example

有没有办法隐藏所有细胞边界？还有额外的奖励，是否可以给第一个单元格（带有“Gebruiker”的单元格）颜色#F4F4F4和第二个单元格（文本框）颜色#E2E2E2

编辑：

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

Answer 1

假设cfrick的评论答案为否，看起来取决于您使用的主题：

如果它是valo（recommended for a few reasons并且从屏幕截图看来您已经在使用它但不是100％肯定的话）那么就有2 other styles, ValoTheme.TABLE_NO_VERTICAL_LINES & ValoTheme.TABLE_NO_HORIZONTAL_LINES。< / LI>
在驯鹿中他们似乎不见了，所以你可能不得不在your theme中手动定义自定义样式。请参阅下面的简单/幼稚尝试：

将样式添加到表格

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

在您的主题中定义

{{1}}

对于单元格，您可以使用style generator，再次为每个单元格使用自定义样式，类似于以下内容：

{{1}}

PS：鉴于您正在尝试，如果您正在使用Vaadin版本7.2+，请查看可能会出现的support for font icons有时很方便，例如嵌入式FontAwesome：

FontAwesome basic usage

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

1 个答案: