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，再次爲每個單元格定製樣式，s沿線的omething：

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：假設你正在嘗試，如果你正在使用Vaadin版本7.2+工作，看看在support for font icons這可能會在時間非常方便，例如嵌入式FontAwesome：