Dynamic column width, single-line table rows

Ironwil616

I need to have each row in the table take only one line, with flexible table widths, column width set by percentages, and content truncated to fit. So far I've got most of it handled. Here's a very simple table I'm working with. First, the initialization code:

[code]
$(function () {
var projects_oTable = $("#Projects").dataTable({
"aoColumnDefs": [
{ "sWidth": "78%", "aTargets": [0] },
{ "sWidth": "22%", "aTargets": [1] }
],
"fnInfoCallback": function (oSettings, iStart, iEnd, iMax, iTotal, sPre) {
if (iEnd == 0) return "0 records";
return iStart + " to " + iEnd + " of " + iTotal;
},
"aaSorting": [[1, 'asc']],
"sDom": 'rtlip',
"bStateSave": true,
"bAutoWidth": false,
"bFilter": false,
"iDisplayLength": 5,
"aLengthMenu": [[5, 10, 20, 30], [5, 10, 20, 30]]
});

$(window).bind('resize', function () { projects_oTable.fnAdjustColumnSizing(); });
});
[/code]

Now, the table (I'm using ASP.NET MVC 3 with Razor view engine):

[code]



Name
Days



@foreach (var project in Model) {

@if(project.ShowLink) { @project.Link } else {@project.Name.ShortText }
@project.EndDateEstimate.ToShortDateString()

}


[/code]

In the model for this page, the project object stores whether or not a link should be generated based on security permissions, and the variable length text fields are actually instances of an Ellipses class I created, that stores the original text and a substring with ellipses appended. This is how I've been solving the need to keep all content on a single line per row, and it works, but it's easily broken. The site I'm working on is put together with a CSS framework that provides a very flexible layout. That's also why you see the 'resize' function in my initialization code. Otherwise, when users resize their browser, my rows extend out of the table. Anyway, depending on the resolution of any given monitor, the table cell width may vary greatly. I could make certain rows don't end up taking 2+ lines by truncating the text to the smallest supported width, but this really looks bad on hi-res monitors, with lots of empty space after the ellipses. Instead of displaying substrings with the full text as a tooltip, I found the following CSS which is supposed to handle the entire thing for me:

[code]
.single-line { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
[/code]

[code]
$(function()
{
$("td").addClass("single-line");
$("td").children().addClass("single-line");
});
[/code]

As you can see, I've set it up so that all table data cells and their children get the single-line class applied. Some of the tables contain more than just text, such as this one which has an anchor tag. This approach works if, for instance, you have a parent element with a defined width. Here is some example code:

[code]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis. Sed semper dui sed ante. Sed luctus tincidunt nisl. Proin iaculis adipiscing nisl. Class aptent taciti sociosqu ad litora amet.

[/code]

I've tested this, and it works great. But it doesn't work with the table I included above. My testing has show that:

1. Table cells expand to accommodate content (which has always pissed me off). Even setting a table td cell to a specific pixel width is ignored.
2. Enclosing table cells content in a div with a specific pixel width works! The CSS shown above does exactly what it's supposed to.
3. Spans do not work. Probably requires a block-level element.
4. Enclosing table cells content in a div with a percentage width does not work. This is probably an issue with table cells expanding for content.
5. Test #4 does work if a specific pixel width is applied to the table, but fails if the table width is set to 100%.

Since the tables are supposed to fluidly grow and shrink when the browser is resized, setting a pixel-based table width is not anywhere close to optimal. It appears that what I really need to do is force table cells to stop expanding when their content is longer, so the CSS can work its magic, but I don't think this is possible. Any advice?

Ironwil616

I feel foolish now. The percentage widths do work with this solution, if I assign the table a table-layout of fixed in CSS. Not sure why that works, but it does.

allan

This is a cracking topic and one that I'll explore in a future blog post - the table-layout: fixed works because it will completely override the browser's default column width handling - i.e. if text overflows a cell, the browser won't try to resize the columns to address that, it will just overflow the text. This is where all the complications come in with the default table layout - the browser can adjust the column sizes dynamically to try and best fit in the data.

DataTables tries to use this mechanism as well, and for the most part it works, but it can sometimes fail, and sometimes outright you want to use fixed layout for your table.

Good to hear you got it working as you want - but certainly a complex topic!

Allan