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

Question

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

我设法通过以下行删除了表格的边框:

tblResetButton.addStyleName(Reindeer.TABLE_BORDERLESS) ;

但这仍然给我留下了一条像这样的垂直线:

有没有办法隐藏所有的单元格边框？还有一个额外的好处，是否可以给第一个单元格(带有“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 .
• 在驯鹿中它们似乎丢失了，因此您可能必须在 your theme 中手动定义自定义样式.请参阅下面的简单/幼稚尝试:

将样式添加到表格

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

在你的主题中定义它

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

至于单元格，您可以使用 style generator ，再次使用您为每个单元格自定义的样式，类似于:

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

附注:鉴于您正在试验，并且如果您使用的是 Vaadin 7.2+ 版本，请查看 support for font icons有时可能会派上用场，例如嵌入式 FontAwesome :