Table caption style

Flow
1

Hello everyone,

I would like to change the style of the table caption (not table header). If I modify:

.v-table-caption-container {
    color: red;
}

The table header color turns into red. But I only want to change the caption, not the header. It works if I change

.v-captiontext {
    color: red;
}

But this changes the caption for every controls. What is the solution? I don’t want to create a separate label, Because I want the same change applys to all tables in my project.

Br,
Xuan

2

You will need to give your table a style name.

Java:


Table myTable = new Table();
myTable.setStyleName("myTable");
.
.
.

Css:


.myTable .v-captiontext{
       color: red;
}
3

Hi, I just tried exactly the same code, it does not work.

Table tblDocument = new Table("File Browser");
tblDocument.setStyleName("myTable");
tblDocument.setWidth(800, Sizeable.UNITS_PIXELS);
tblDocument.setHeight(200, Sizeable.UNITS_PIXELS);
.myTable .v-captiontext{
	color: red;
}

My vaadin version is 6.3.3

4

John got it almost right. The caption element receives the same style name as the actual component, but it is always prefixed with v-caption.

So the following should work:

.v-caption-myTable .v-captiontext {
	color: red;
}

The v-captiontext part is not absolute necessary, so you can get by with even less CSS:

.v-caption-myTable {
	color: red;
}
5

All right, it works!

Then my second question is, is it possible not to specify the “myTable” stylename, instead I want to over write all table caption’s style. Like in HTML, I can

HTML

<table>
<caption>blabla</caption>
<tr>
  ...
</tr>
</table>

CSS

caption {
   color: red;
}
6

You can’t do it specifically only for all table captions, but you can of course style all captions of all components using the .v-caption selector.

If you only wish to style table captions, I suggest you create a new class that extends the Table and specify the stylename there.