"IE11", "Chrome56" table resize different(scroll?!)

BWH

Hello, everyone ?

I found something strange in my work.

Let's see the picture.

This is Chrome
http://i.imgur.com/A8NSw18.png

This is IE11
http://i.imgur.com/DYN7u2l.png

"Chrome" has "Scroll" and "Header" size is right

But

"IE11" does not have "Scroll" and "Header" size does not

I will also show the js script source.

////////////////////////////////////////////////////////////////////////////
$("#masterTable").dataTable({
"autoWidth": true,
"autoHeight": true,
"destroy": true,
"data": data,
"scrollX" : true,
"scrollY" : "70%",
"scrollCollapse" : false,
"paging" : true,
"pagingType": "simple_numbers",
"info" : false,
"searching" : false,
"dom": '<"top"i>rt<"bottom"flp><"clear">',
"deferRender": true,
"lengthMenu": [[10, 20, 30], [10, 20, 30]],
"columnDefs" : [
{"orderable" : true, "targets" : 0 },
{"orderable" : false, "targets" : 1 },
{"orderable" : true, "targets" : 2 ,"orderDataType": "dom-text", type: 'string' },
{"orderable" : true, "targets" : 3 },
{"orderable" : true, "targets" : 4 ,"orderDataType": "dom-text", type: 'string' },
{"orderable" : true, "targets" : 5 },
{"orderable" : true, "targets" : 6 },
{"orderable" : true, "targets" : 7 },
{"orderable" : true, "targets" : 8 },
{"orderable" : true, "targets" : 9 ,"orderDataType": "dom-text", type: 'string' },
{"orderable" : true, "targets" : 10 },
{"orderable" : false, "targets" : 11},
{"orderable" : true, "targets" : 12 ,"orderDataType": "dom-text", type: 'string' },
{"orderable" : true, "targets" : 13 },
{"orderable" : true, "targets" : 14 },
{"orderable" : true, "targets" : 15 },
{"orderable" : true, "targets" : 16 }
],
"columns" : [
{ className : "grid_data_c"},
{ className : "grid_data_c"},
{ className : "grid_data_l"},
{ className : "grid_data_c"},
{ className : "grid_data_c"},
{ className : "grid_data_l"},
{ className : "grid_data_c"},
{ className : "grid_data_l"},
{ className : "grid_data_c"},
{ className : "grid_data_c"},
{ className : "grid_data_c"},
{ className : "grid_data_c"},
{ className : "grid_data_c"},
{ className : "grid_data_c"},
{ className : "grid_data_c", render:$.fn.dataTable.render.moment("YYYYMMDDHHmmss", "YYYY-MM-DD HH:mm:ss")},
{ className : "grid_data_c"},
{ className : "grid_data_c"}
],
"language" : {
"emptyTable" : "데이터가 존재하지 않습니다.",
"lengthMenu": " 최대 표시 줄 MENU ",
"paginate": {
"first": "맨처음",
"last": "마지막",
"next": "다음",
"previous": "이전"
}
},
"initComplete" : function(settings, json) {
},
"footerCallback": function () {
var api = this.api();
if(api.data().length > 0) {
$(api.column(0).footer()).html(api.data().length.money() + " 건");
}
}
});
////////////////////////////////////////////////////////////////////////////

What did I miss?

thank you for reading ^____^

allan

Looks like IE is collapsing the text in your header, which allows it to be displayed without scrolling. I assume you don't want it to collapse the text like that?

If not, try adding:

table thead th {
  white-space: nowrap;
}

to your CSS.

Allan

BWH

Hello allan !!

Thanks for the reply !!

It's an important hint !!

Changed css

tr, td {
white-space: nowrap;
}

Thank you so much !! ^____________^