Table styling issue...

Hi all,

I have a small issue in styling a table. (Pls see the attached image).
It seems that the right border of the table header has shifted a few pixels than in the body.

Following are my CSS fragments.

.v-table-header, .v-table-header td {
	background-color: #AFCDEB;
	border-bottom: 1px solid #007DC2;
	border-right: 1px solid #007DC2;
}

.v-table-body td {
	border-right: 1px solid #007DC2;
}

.v-table-caption-container {
	font-size: 10px;
	font-weight: bold;
	font-family: verdana;
	background-color: #AFCDEB;
	color: #007DC2;
	text-shadow: #007DC2 0 0px 0;
}

.v-table-cell-wrapper {
	white-space: normal;
}

.table-style {
	color: #007DC2;
	font-size: 10px;
	font-family: verdana;
	border: 1px solid #007DC2;
}

Can someone please tell me what I’m doing wrong here…??

Thanks in advance.
Asela.
11632.png

Hi,

The table is a delicate piece to theme (too delicate, even, lots of manual calculations done during rendering). Read the theming instructions from the beginning of the Base theme’s table styles, to see what can be altered and how it should be done:
http://dev.vaadin.com/browser/versions/6.5/WebContent/VAADIN/themes/base/table/table.css

The main culprits for this sort of border shifting are the borders and paddings on the v-caption-container and v-cell-content.

For you, I guess the most important part is this (from the instructions):

- Possible cell border in header must be themed into column resizer.

So you need to move the border-right property from the .v-table-header td to the .v-table-resizer element