Mix Fixed and Relative Column Widths in CellTable?

[nacho]

I'm trying to have fixed width columns and relative width columns togheter, can't get it running.

As described here http://code.google.com/webtoolkit/doc/latest/DevGuideUiCellTable.html I am trying to do it in this way:

table.addColumn(checkBoxColumn);
table.addColumn(nameColumn, constants.Name());
table.addColumn(emailColumn, constants.Email());

table.setWidth("100%", true);
table.setColumnWidth(checkBoxColumn, 10.0, Unit.PX);
table.setColumnWidth(nameColumn, 40.0, Unit.PCT);
table.setColumnWidth(emailColumn, 50.0, Unit.PCT);

But I can't make it work. I am on Chrome / Mac. 

Is there anything that I am doing bad?

[nacho]

Is anyone using fixed width and relative width columns in Chrome / Mac?

I would like to know if this issue that I am having is something that I am doing wrong.

[Thomas Broyer]

Could you first tell us what "doesn't work"? There are a whole lot of possibilities between "it doesn't compile" and "it doesn't display like I'd like"

Also, what are you expecting this ro render? where do you expect the % to be calculated from? and what (do you expect) should happen to the remaining 10%?

[nacho]

It doesn't display the way that I'd like.

I would like that my table has a 100% width so it adjust it size to the container div. 

Here is a capture: http://www.under-code.com/cap-celltable.png

In FF It displays in the way that I want: http://www.under-code.com/cap-ff.png

[Thomas Broyer]

Are you sure this is because of the columns sizes? Your CellTable seems to be within another <table> with no specified width. A quick test in pure HTML shows that Firefox extends the outer table to width:100% while Chrome doesn't (and the inner table then has the minimum size required to show the absolutly-sized columns and the table/cell borders).

BTW, I still don't get what you're trying to do: if you mix relative and absolute sizes, you should have at least one column left with no specified width (equivalent to width:auto) so it can take the whole space left; see http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout

Here, if your table is 100px wide, 50%=50px and 40%=40px, so the remaining 10% are the 10px taken by the first column. But otherwise (i.e. most of the time), 10% != 10px, so there would be some space left, or not even enough space to give to each column (table-width=90px -> 50%=45px and 40%=36px; 10+45+36=91px, wider than the table!). According to CSS, in the first case, the extra space will be distributed (which means your 10px-wide column might now be 15px), and in the second case, the table is wider than originally asked (in my example, it would be 91px wide rather than demanded 90px).

[nacho]

You are right, I am a total dumb. My CellTable was inside a VerticalPanel. Removing the VerticalPanel now my CellTable is displaying as I want.

About what you are saying of having at least one column without width, that was my first attempt, also displaying well in FF but not in Chrome, but again the trouble (now I know) was the VerticalPanel that was wrapping the CellTable.

On one side, thanks a lot! On the other side, sorry me about my idiot doubt :) Sometimes I get blinded looking for the solution in only one place and I don't look other pieces of the puzzle.