TH Widths Don't Match TD Widths (and I've Tried The Usual Stuff)

machineghost

I've got a problem with my DataTable (which, unfortunately, I can't share because it's behind an authentication wall; I've pasted the initialization options below though). For some reason the THs and the TDs line up just fine until I scroll all the way to the right of the table (where I have several THs with extra-long titles) .. at which point the TDs fail to fill the full space (while the THs do). If you inspect them using Firebug it becomes evident that they have different values for their width style.

Now if I remove a CSS rule that we have of "TD {max-width:80px}" it fixes things, but then I get gianormous cells. If I try to limit the width of those cells the DataTables way (by adding "sWidth: '80px'" to my aoColumns), it does nothing. And if I try changing the table-layout from auto to fixed (as suggested in a different thread) it doesn't help.

I also tried invoking fnAdjustColumnSizing after I add the table to the page (since it is built "behind the scenes"); this fixes an (unrelated) height problem, but it still leaves me with my non-matching widths.

The basic options I'm using to initialize the DataTable are:

aaSorting: [],
bFilter: false,
bInfo: true,
bLengthChange: false,
bPaginate: true,
bProcessing: true,
bRetrieve: true,
bScrollCollapse: true,
bSort: true
iDisplayLength: 20,
sPaginationType: 'full_numbers',
sScrollX: '100%',
sScrollY: '400px',
sScrollXInner: "200%" // Got this from yet another thread ... it too did no good

plus an aoColumns and aaData, where the aoColumns look like:

{sTitle: 'Something', sWidth: '80px'}

and the aaData is just some simple HTML (some cells have a single input element, others have a single a element, etc.).

I really need to be able to:
A) horizontally scroll the table
B) limit the column widths somehow
C) have the headers and the table cells line up

Please tell me that DataTables can do that (and ideally tell me how I can make DataTables do that ;-) ).

machineghost

P.S. Both the headers table and the body table have the same exact width when I inspect them in Firebug ... which is very odd, given that I can "scroll past" the body table a bit, while the headers table fills the entire space (and thus can't be scrolled past).

Also odd: despite the two tables having equal widths, the TDs/THs have differing widths. The THs all have a width of 109px, but the TDs all have 93 px (except the last TD which has 92px).

P.P.S. After I cleaned up some of the HTML content inside the aaData I was able to eliminate the "scroll past" issue ... however, even though now the two tables really do appear to have the same width, the individual columns still have noticeably different widths.

I understand that for particularly fancy DataTables it's necessary to use two separate tables for the headers/body, but have any of the DataTables devs ever considered an alternative 1-table rendering option? It seems like this issue and the many like it that I saw in other forum posts could all just be solved if the THs were inside the same table.

machineghost

P.P.P.S (Sorry for all the post-scripts, just trying to provide as much info as possible) After messing around with the CSS/HTML I've managed to get everything working ... kinda. If I remove any CSS limits on the cell's width and artificially limit the width of the cells' contents, I can actually get the table to behave normally (ie. the columns of the headers and the body rows line up).

But the moment I stop limiting the contents' width and start limiting the cell's width (via CSS; using/not using sWidth just does nothing) the columns stop lining up.

flarpy

This is just a workaround but I have used mRender to define functions which control width for cells which have widely varying content length. In some I also truncate contents eg, below. Not ideal but it does give me very fine-grained control, especially as my app is international and all the german words are waaaaaaaayyyyyy toooooooooooo long!

[code]
var elipsis = function(data, num)
{
if(data.length > num) {
return data.substring(0, num) + '...';
}
return data;
}
[/code]

allan

@machineghost - can you link use to a test case showing the problem?

> I understand that for particularly fancy DataTables it's necessary to use two separate tables for the headers/body, but have any of the DataTables devs ever considered an alternative 1-table rendering option?

DataTables only splits the table into two components if x or y scrolling is enabled. If you don't use scrolling then the table structure is used unaltered. The reason for the split into two (or three if you have a footer) is that it is the only way to get scrolling to work correctly across browsers. Trust me, there is nothing more that I would love to do in DataTables than to get rid of that need for a split (somewhat of an understatement) but I simply don't have a solution to allow the table to scroll correctly without it. Any suggestions are _very_ warmly welcomed.

Allan

machineghost

@flarpy Thanks for that snippet. Based on allan's post I think I'm just going to disable scrolling on my table for now, but I might actually use that snippet on a different table to get the "elipsis" effect :-)

@allan I didn't even realize that there was a way to disable the twin tables (by disabling scrolling); I'm totally just going to do that, and wrap the table in an overflow:auto div to get the scrolling aspect. Thanks!

As for needing the twin (or even triple) tables, do you have another thread, or a page on the site you can point me to that explains why the extra tables are necessary? If there is a solution to be found I'd love to help find it, but I don't see why having headers (or footers) should have any impact on scrolling?