about table layout to "fixed"

913 views
Skip to first unread message

tong123123

unread,
Apr 12, 2012, 6:15:40 AM4/12/12
to google-we...@googlegroups.com
in gwt developer guide, it said

In order to gain fine-grain control over the width of columns, you must set the table layout to "fixed" by passing true into CellTable.setWidth(String, boolean).
but I found that if table layout is fixed, then after setting the column width, if the column content is too width for the column, the extra content will be truncated, but not display in the next line.

Assume I have three column, I want the width of two column is fixed, but the remaining column width is relative (using 100%, for e.g.), and then I want if the content of that column is too long, the content will display in two line in that column, but not truncated, is this possible?
I use TextCell, Column<TextCell> for the column of CellTable.
the version of GWT is 2.4



tong123123

unread,
Apr 12, 2012, 6:28:30 AM4/12/12
to google-we...@googlegroups.com
how about if four column, two column width is fixed and two column width is relative (each is 50%), if the content is longer than the relative width of these columns, the content will wrap to next line, but not truncate, is this possible?

tong123123

unread,
Apr 13, 2012, 2:05:50 AM4/13/12
to google-we...@googlegroups.com
In fact, if using pure html + css, if table layout is fixed, the column content will penetrate the next cell, but not truncate, but in gwt, I found that the content will really be truncated, so strange.
my html + css is as follow:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<STYLE>
/* Set table to 'fixed' (fastest render) layout */
.fixed_table {
    width:50%;
    table-layout: fixed;
    border-collapse:collapse;   
}

/* this only affect tr, td under class .fixed_table */
.fixed_table tr,
.fixed_table td{
    border:1px solid black;
}


/* this will affect all tr, td */
/* tr, td{border:1px solid black;} */
 
/* Set table to 'auto' (best fit) layout. This is the default */
.auto_table {
    width:50%;
    table-layout: auto;
}
</STYLE>
<TITLE>
Test HTML Table
</TITLE>
</HEAD>

<BODY BGCOLOR="white" >
<TABLE CLASS="fixed_table">
<TR>
<TD style="width:70%;">WERWEREREREREWREWREREWREWREWRWERWER longsfdsfdsfdfds</TD>
<TD style="width:10%;">234</TD>
<TD style="width:20%;">3434324234324323</TD>
</TR>
<TR>
<TD style="width:70%;">234</TD>
<TD style="width:10%;">345454366546455345TERRLONG</TD>
<TD style="width:20%;">row3</TD>
</TR>
</TABLE>
<br/>
<TABLE CLASS="auto_table">
<TR>
<TD>WERWEREREREREWREWREREWREWREWRWERWER longsfdsfdsfdfds</TD>
<TD>234</TD>
<TD>3434324234324323</TD>
</TR>
<TR>
<TD>234</TD>
<TD>345454366546455345TERRLONG</TD>
<TD>row3</TD>
</TR>
</TABLE>
</BODY>
</HTML>

the result is attached, the upper table is using fixed layout.in the second row cell two, the content will penetrate to cell 3, but not truncated.

On Thursday, April 12, 2012 6:15:40 PM UTC+8, tong123123 wrote:
htmlTestResult.jpg

Thomas Broyer

unread,
Apr 13, 2012, 4:10:07 AM4/13/12
to google-we...@googlegroups.com


On Friday, April 13, 2012 8:05:50 AM UTC+2, tong123123 wrote:
In fact, if using pure html + css, if table layout is fixed, the column content will penetrate the next cell, but not truncate, but in gwt, I found that the content will really be truncated, so strange.

This is because TDs in a DataGrid have an overflow:hidden style.

Also, using Chrome's DevTools to put a long text into a cell in the DataGrid Showcase, the text wrapped (provided there were spaces to wrap on, otherwise, see this question on SO)
Reply all
Reply to author
Forward
0 new messages