fnRender and Column Widths

pclemons

My HTML table's "container" is defined as 900px wide, the within it at 100%:
The individual columns each have a %-width, which totals to 100%.






Name
ID
Description<!-- NOTE: this gets overridden -->
LDAP
Organization
Email




Loading data from server









My Column Definition, using aoColumns is:

"aoColumns" :
[
{"mDataProp": "name",
"fnRender": function ( oObj, sVal )
{
return sVal + "something wicked long";
}
},
{ "mDataProp": "id" },
{ "mDataProp": "description" },
{ "mDataProp": "ldap" },
{ "mDataProp": "org" },
{ "mDataProp": "email" }
],

When rendered, my Columns are far beyond the defined width of the table. While the table is indeed set to 900px, the last column sits around 1200px.

If I reduce the "font-size:100%" code to "font-size:.1em", it's obviously very small, but the table columns are exactly 900px wide.

Likewise, if I remove the "something wicked long" part of the column renderer, the columns shrink back down to being exactly 900px wide.

What gives?

Kind regards,

Peter Clemons

pclemons

I have solved my own problem. The basic problem had nothing to do with DataTables or its fnRender function. It was a series of values in various columns that had extremely long strings in them with no white-space or word-break characters within them. For example, an ldap context.

The solution is use of the following CSS styles appropriate to your needs:
width: 100% - allow the table to scale width according to the parent
table-layout: fixed; - force the table to a specific width (but still adjust to window size if a %-width)
white-space: nowrap; - do not permit white space w/i words to wrap to the next line
overflow: hidden; - hide text that doesn't fit
text-overflow: ellipsis; - show hidden text as ellipsis ...