Table Scroll Column

Hello,

By default in Vaadin, there is a column in a Table just a few pixels wide to the right of the data columns. This is where the scrollbar appears when there are enough items in the table to scroll.

Is there a way to hide this column using Java or CSS? I would like it to appear only when there are enough items in the table to scroll.

Thanks!

The space for the scroll bar is normally taken when the table grows big enough. Try for example adding a few items in
this example
. I don’t see the content area of the table changing.

Could you give a simple code example where this occurs? The containing layouts may affect this.

Marko,

Here’s an example(basically just the first table example from the Book of Vaadin):


package com.example.tabletest;

import com.vaadin.Application;
import com.vaadin.ui.*;

public class TabletestApplication extends Application {
	@Override
	public void init() {
		Window mainWindow = new Window("Tabletest Application");
		Label label = new Label("Hello Vaadin user");
		mainWindow.addComponent(label);
		setMainWindow(mainWindow);
		setTheme("base");
		
		/* Create the table with a caption. */
		Table table = new Table("This is my Table");
		table.setWidth("100%");

		/* Define the names and data types of columns.
		 * The "default value" parameter is meaningless here. */
		table.addContainerProperty("First Name", String.class,  null);
		table.addContainerProperty("Last Name",  String.class,  null);
		table.addContainerProperty("Year",       Integer.class, null);

		/* Add a few items in the table. */
		table.addItem(new Object[] {
		    "Nicolaus","Copernicus",new Integer(1473)}, new Integer(1));
		table.addItem(new Object[] {
		    "Tycho",   "Brahe",     new Integer(1546)}, new Integer(2));
		table.addItem(new Object[] {
		    "Giordano","Bruno",     new Integer(1548)}, new Integer(3));
		table.addItem(new Object[] {
		    "Galileo", "Galilei",   new Integer(1564)}, new Integer(4));
		table.addItem(new Object[] {
		    "Johannes","Kepler",    new Integer(1571)}, new Integer(5));
		table.addItem(new Object[] {
		    "Isaac",   "Newton",    new Integer(1643)}, new Integer(6));
		
		mainWindow.addComponent(table);
	}
}

Here’s the right side of the table(screen captured from IE):

You can see there’s a column about 1 pixel wide on the very right.

If I don’t set the table width to 100%, I still get this double border effect on the right:

Thanks for your help!

Ah, you’re using the base theme. With the reindeer theme it doesn’t show.

There’s a one-pixel wide column border, because you need it in the table header to have something to grab for column resizing.

You should be able to hide it in CSS. Look at the reindeer theme, for example.

.v-table-cell-content:last-child {
    border-right-color: transparent;
}

Marko,

Thanks for your response. Unfortunately the CSS didn’t work for me(in IE at least…ugh), but this shouldn’t be a big deal anyway.

Yeah, IE6 and 7 don’t support the :last-child selector. IE8 should if I remember correctly.

I would still like to see that 1–2 pixel calculation error fixed someday, it irritates me as well when the selected row ends before the actual border. Looks broken and unprofessional.

I made a ticket so this might someday get fixed:
#6677

I’ve been having the same problem with my tables. I’m reading the ticket, is it supposed to be resolved? And if so how do you work around it?