UI DataTable при изменении размеров окна браузера

[Sveta]

Здравствуйте! Может быть кто-нибудь сталкивался с такой проблеммой?
При загрузке страницы, динамически формирую таблицу. Проблемма в том, что при изменении окна браузера - при уменьшении, ячейки тоже уменьшаются, что просто замечательно, но при обратном увеличении на весь экран расширяются только ячейки с данными, а не с заголовками столбцов...и данные начинают не соответствовать заголовкам...и так во всех браузерах...

[Hoshinokoe]

Sveta,

сделайте небольшой пример того, что не работает и выложите на jsfiddle.com.

Сделал пару примеров с dataTable - заголовки меняются вместе с содержимым. Проверял на FF.

[Sveta]

Да в принципе у меня самая обычная таблица, в ней много колонок и строк...я так поняла мне нужно разобраться с атрибутами:

var default_options = {
"sScrollY": "500px",
"sScrollX": "500px",
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aaData":myJson.aaData,
"aoColumns":myJson.Def_aaData.Abrev	
				};
			 
			   $('#example').dataTable(default_options);

"sScrollY": "500px",
"sScrollX": "500px",
"sScrollXInner": "100%"
может еще какие атрибуты посмотреть...сижу разбираюсь...
Главное когда загружается окно - все хорошо, нажимаю кнопку уменьшить/увеличить окно - тоже все хорошо, но стоит мне самой мышкой менять размер окна - как данные начинают сжиматься сами по себе, а заголовки сами по себе....

[Sveta]

Я поняла в чем была ошибка...но как исправить ее не представляю...

//Формирование таблицы			
	$.getJSON("data_m1.json", function (myJson) {		
		var table="<div id='demo'><table cellpadding='0' cellspacing='0' border='0'  class='display' id='example'><thead id = 'headTable'></thead><tbody id = 'bodyTable'></tbody><tfoot></tfoot></table></div>";	
			$('#container').html('');
			$('#container').append(table);	
			var colName="";//имена колонок
			var mystr="<tr>";
			  for(var i=0; i<myJson.Def_aaData.Abrev.length; i++){
			  colName="<th>"+myJson.Def_aaData.Abrev[i]+"</th>"
				mystr=mystr+colName;
			  }
			mystr=mystr+"</tr>";
			$('#headTable').html('');
			$('#headTable').append(mystr);	
					  //Таблица
				var default_options = {
					"sScrollY": "500px",
					"sScrollX": "500px",
					"sScrollXInner": "100%",
					"bJQueryUI": true,
					"sPaginationType": "full_numbers",								
					"aaData":myJson.aaData,//строки
					"aoColumns":myJson.Def_aaData.Abrev//стобцы(количество)
						
				};
			 
			   $('#example').dataTable(default_options);		
	});

Как видно из кода, я весьма странным образом подгружаю колонки из json-файла (сначала добавляю пустые колонки, а поверх код в html с названиями...разумеется он названия не воспринимает как нужно...)...но как их по-другому подгрузить - не представляю...а загвоздка именно в этом %) (((((((((((((((((((((((((((((((((((
Помогите, пожалуйста!!