Limit width of table or cell

thinkbohemian

I am using dataTables to show user entered information, the fields are not restricted to size, so often the fields of the table end up expanding into/over/under everything else. Is there any way to restrict this? Possibly by setting certain tables to wrap-text?

Currently I'm truncating the strings serverside after a certain number of characters, though this is less than ideal since people who are searching won't be able to search the whole text. Any Ideas?

Tol

Hi,

I have a similar problem with text (long strings without blanks) and columnwidth, often ending up in a too big table width. What I've read so far is that with the beta 1.7.3? width problems should be fixed (didn't try it till now). I don't really know how the cells will behave in the new version, linebreak?, overflow? or just rezising as they do now (what i don't hope).

A workaround I thouht about is to devine a div with fixed height and width, wrap the text in the cell and mark the overflow as hidden (not tested either) - still not ideal but this could fix your searchproblem.

If so. has another "hack" or idea to solve this issue pls don't hesitate to tell us ;)

Greets Tol

Zerxer

I also truncate on the server-side. What I've done to help with searching still is also put the full text in a hidden span in the same column. So I have the truncated text visible and then the full text hidden.

Tol

Here an little update what I'm using now (after reading some css uargh), perhaps not exactly what you are searching for but it might be a help for so. else - fixed cell-width for long strings, linebreak if blanks are in your text, no overflow, tooltip for cells:

- first of all give the table the css-att: style="table-layout:fixed"
- give the e.g. in a css-file the att: "overflow: hidden"
- define theneeded width for your columns in the in your html-dummy
- after initializing the table make 2 additionall calls e.g. in your .ready():

[code]
$jq('#idtABLE tbody td').live('mouseover', function() {
var sTitle;
sTitle = $jq(this).text();
this.setAttribute( 'title', sTitle );
} );

$jq(oTable.fnGetNodes()).tooltip({ //tooltip plugin for jQuery!
"delay": 250,
"track": true,
});
[/code]

Sidenote: If you want a fixed height for the rows/cols do it as I mentioned before ... wrap text in a an set fixed attributes for width and weight. Table height can't be set to a fixed value waht I've read so far.