Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82027

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

$
0
0
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 ;-) ).

Viewing all articles
Browse latest Browse all 82027

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>