Column widths

jdavidmcclain

Hi,

Preface: This is unfortunately behind a VPN and not accessible to the public, but I'll try to post code as I can.

I've just started using DataTables and have worked out a good many kinks so far. As of right now, I seem to be having a lot of trouble getting my column widths to work the way I'm wanting. I am letting DataTables read from the DOM.

I've tried using aoColumnDefs and aoColumns. I got to the point where I was pretty sure aoColumnDefs was my best option. I couldn't find a lot of examples, but the format I used was:

[code]
$(document).ready(function() {
$('#reportTable_1').dataTable({
"sDom": '<"H" Tfl>rt<"bottom"pi>',
"bJQueryUI": true,
"bSort": true,
"iDisplayLength": "-1",
"aLengthMenu": [
[-1, 10, 25, 50],
["All", "Some", "More", "Lots"]
],
"aoColumnDefs": [
{ "sWidth": "20%", "aTargets": [ 0 ] },
{ "sWidth": "20%", "aTargets": [ 1 ] },
{ "sWidth": "20%", "aTargets": [ 2 ] },
{ "sWidth": "20%", "aTargets": [ 3 ] }
],
"oTableTools": {
"sSwfPath": "js/DataTables-1.8.2/extras/TableTools/media/swf/copy_cvs_xls_pdf.swf",
"aButtons": [
"copy",
"print",
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": [ "csv", "xls", "pdf" ]
}
]
}
});
} );
[/code]

Where I played with every type of width value in pixels or percents, used integer values for column specification in 'aTargets' as well as the column name surrounded by quotes.

I actually have 6 columns in my layout, and I want the 6th column to be the widest, taking up about 40-50% of the tables, and the rest of the columns using the rest of the area, but not necessarily equally (Maybe 7%,13%,5%,12%,13% and then the last column at 50%)..
No matter how many different ways of using widths, it wouldn't work. Sometimes it would show differences, sometimes it wouldn't. And if the table DID show differences, they were extreme, I never was able to make minor adjustments and get minor changes for tweaking.

jdavidmcclain

Here is a look at the exact aoColumnDefs I'm using and what it looks like on the screen.
[code]
"aoColumnDefs": [
{ "sWidth": "10%", "aTargets": [ 0 ] },
{ "sWidth": "13%", "aTargets": [ 1 ] },
{ "sWidth": "7%", "aTargets": [ 2 ] },
{ "sWidth": "15%", "aTargets": [ 3 ] },
{ "sWidth": "15%", "aTargets": [ 4 ] },
{ "sWidth": "20%", "aTargets": [ 5 ] }
],
[/code]

http://i837.photobucket.com/albums/zz292/aceincorporated/Misc/datatable_example_1.png

Note how it extends and stretches past the header of my table. Even though I have a hardcoded table width and a div around the table with a static width as well.