Vaadin - 删除 table 中的单元格边框
Vaadin - remove cell borders in table
我在 Vaadin 的帮助下在 Eclipse 中创建了一个 table。
我设法用以下行删除了 table 的边框:
tblResetButton.addStyleName(Reindeer.TABLE_BORDERLESS) ;
但这仍然给我留下了一条像这样的垂直线:
有没有隐藏所有单元格边框的方法?还有一个额外的好处,是否可以给第一个单元格(带有 "Gebruiker" 的单元格)颜色 #F4F4F4
和第二个单元格(文本框)颜色 #E2E2E2
编辑:
formlayout 会很好,但我似乎无法使用背景颜色,所以我恢复到 tables。这是代码:
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 ;
}
假设 cfrick 的评论的答案是否定的,看起来这取决于您使用的主题:
- 如果是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
.
- 在驯鹿中它们似乎丢失了,因此您可能必须在 your theme 中手动定义自定义样式。请参阅下面的 simple/naive 尝试:
将样式添加到 table
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";
}
}
});
P.S.: 假设您正在试验,并且如果您使用的是 Vaadin 7.2+ 版本,请查看 support for font icons which may come in very handy at times, for example the embedded FontAwesome:
我在 Vaadin 的帮助下在 Eclipse 中创建了一个 table。
我设法用以下行删除了 table 的边框:
tblResetButton.addStyleName(Reindeer.TABLE_BORDERLESS) ;
但这仍然给我留下了一条像这样的垂直线:
有没有隐藏所有单元格边框的方法?还有一个额外的好处,是否可以给第一个单元格(带有 "Gebruiker" 的单元格)颜色 #F4F4F4
和第二个单元格(文本框)颜色 #E2E2E2
编辑:
formlayout 会很好,但我似乎无法使用背景颜色,所以我恢复到 tables。这是代码:
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 ;
}
假设 cfrick 的评论的答案是否定的,看起来这取决于您使用的主题:
- 如果是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
. - 在驯鹿中它们似乎丢失了,因此您可能必须在 your theme 中手动定义自定义样式。请参阅下面的 simple/naive 尝试:
将样式添加到 table
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";
}
}
});
P.S.: 假设您正在试验,并且如果您使用的是 Vaadin 7.2+ 版本,请查看 support for font icons which may come in very handy at times, for example the embedded FontAwesome: