-
Book Overview & Buying
-
Table Of Contents
Vaadin 7 Cookbook
In this recipe, we will learn
how to change the CSS style of components. We'll create a new theme for the Table. Vaadin's Table has gray stripes by default. We will change it. Our new table will be without static stripes. Instead, we will add a style for a dynamic strip. The yellow strip will appear when the mouse hovers over the row.
The following screenshot shows the default style for tables:

The following screenshot shows our new style for tables:

Carry out the following steps to learn how to change the CSS style of components:
We create a Vaadin project with the main UI class called Demo as follows:
public class Demo extends UI {…}In the main class of the init() method, we create a simple Table with some rows. In the following steps, we will create our new style called myTable. We set this style name to the Table. For a better view, we set the number of visible table rows according to the number of items in the table using the setPageLength() method...
Change the font size
Change margin width
Change background colour