Width Problem

timschultz

Hello,

I'm using the DataTables plug-in for a variety of tables (I think we're up to 50). These tables are of varying widths, with some requiring horizontal scrolling. I'm encountering an issue with the horizontal sizing for the smaller tables when I don't set sScrollX. Here is a screenshot:
http://imgur.com/epp9m

Here are my initialization parameters:
[code]
oTable = $(tableName).dataTable(
{
"bJQueryUI": true,
"bPaginate":false,
"bProcessing":true,
"bDeferRender":true,
"bSort":false,
"bScrollCollapse":true,
"oSearch":{"sSearch": "", "bRegex": true, "bSmart": false},
"sDom": 'TC<"H"ir>t<"F"i>',
"oTableTools": {
"sSwfPath": "/scripts/swf/copy_cvs_xls.swf",
"aButtons": [
"copy",
"print",
"csv"
]
},
"oColVis": {
"bRestore": true
}

}
);
[/code]

I've tried using the nightly builds to no avail.
Any ideas?

Thanks,
Tim

fbas

do you want it to fill out 100% of the width? sScrollXInner

http://datatables.net/ref#sScrollXInner

[quote]This property can be used to force a DataTable to use more width than it might otherwise do when x-scrolling is enabled. For example if you have a table which requires to be well spaced, this parameter is useful for "over-sizing" the table, and thus forcing scrolling. This property can by any CSS unit, or a number (in which case it will be treated as a pixel measurement).[/quote]
[code]
$(document).ready(function() {
$('#example').dataTable( {
"sScrollX": "100%",
"sScrollXInner": "110%"
} );
} );[/code]

timschultz

Sorry for the delay in responding back. Thank you for the suggestion. I've tried it, but it then inappropriately sizes the table a bit too large. Basically what I'm looking for is to have the table fit be as large as it needs to be and no more. In the image above, the headers are too big for some reason. If it requires me to fit the table to 100% of available width, then so be it - but, as I said above, the parameters you mentioned above did not fix the problem.

fbas

ok. how about setting the table to 100% and wrapping it in a div with a fixed width?

timschultz

I was trying to keep the layout fluid. I have a fixed-width menu on the left, and was leaving the rest of the page to fill out dynamically. I think that I will have to go with a fixed-width div that has its style(specifically width) set through javascript events. Thanks for the help.