how to fix column width in IE, chrome for datatables - datatables

Question

I have a table in datatables. problem is some columns have a lot of text squeezed into a small column. it does not seem to readjust the width. Issue here is the table is wider than the container it is within so i do not want to give it a fixed width. i want it to by dynamically adjustable but not squeeze large text into small columns.
The column is remarks
https://jsfiddle.net/shorif2000/aa9wnhd6/
var datax = [{"ID":"10837","COMMS_MATRIX_ID":"729","FILENAME":"INC000023081620-Stage_Universal_Communication_Matrix1.xlsx","CMLINE":"22","SRC":"x.x.x.x","SRC_NET":"x.x.x.x\/25","SRC_ZONE":"s.v.l","SRC_SECZONE":"s","SRC_NETZONE":"v","SRC_LOCZONE":"l","DST":"x.x.x.x","DST_NET":"x.x.x.x\/27","DST_ZONE":"s.v.l","DST_SECZONE":"s","DST_NETZONE":"v","DST_LOCZONE":"l","SPA":"Deny","SPN":"Flow is denied by the security zoning policy","RPA":"Permit","RPN":"Flow is permitted within the same routing domain","FPA":"Permit","FPN":"Flow is permitted using an acceptable port","STATUS":"To implement","PROTOCOL":"TCP","PORTS":"80","NAT_DIR":null,"NAT_IP":null,"ENVIRONMENT":"none","SERVICE_GROUPING":null,"TRACK":"1.5","REMARKS":"EXTERNAL REVERSE PROXY 1 TO MID-TIER LOAD BALANCER","DROW":"9","SRC_DESC":"001","DST_DESC":null,"REMEDY_INC":null,"CREATED_BY":"UddinS2","UPDATED_BY":"UddinS2","SRC_SOCT1":"x","SRC_SOCT2":"232","SRC_SOCT3":"163","SRC_SOCT4":"4","SRC_EOCT1":"x","SRC_EOCT2":"232","SRC_EOCT3":"163","SRC_EOCT4":"4","SRC_CIDR":"32","SRC_NET_SOCT1":"x","SRC_NET_SOCT2":"232","SRC_NET_SOCT3":"163","SRC_NET_SOCT4":"0","SRC_NET_EOCT1":"x","SRC_NET_EOCT2":"232","SRC_NET_EOCT3":"163","SRC_NET_EOCT4":"127","SRC_NET_CIDR":"25","DST_SOCT1":"139","DST_SOCT2":"47","DST_SOCT3":"171","DST_SOCT4":"29","DST_EOCT1":"139","DST_EOCT2":"47","DST_EOCT3":"171","DST_EOCT4":"29","DST_CIDR":"32","DST_NET_SOCT1":"139","DST_NET_SOCT2":"47","DST_NET_SOCT3":"171","DST_NET_SOCT4":"0","DST_NET_EOCT1":"139","DST_NET_EOCT2":"47","DST_NET_EOCT3":"171","DST_NET_EOCT4":"31","DST_NET_CIDR":"27","NAT_TO":null,"NAT_TO_SOCT1":null,"NAT_TO_SOCT2":null,"NAT_TO_SOCT3":null,"NAT_TO_SOCT4":null,"NAT_TO_EOCT1":null,"NAT_TO_EOCT2":null,"NAT_TO_EOCT3":null,"NAT_TO_EOCT4":null,"NAT_FROM":null,"NAT_FROM_SOCT1":null,"NAT_FROM_SOCT2":null,"NAT_FROM_SOCT3":null,"NAT_FROM_SOCT4":null,"NAT_FROM_EOCT1":null,"NAT_FROM_EOCT2":null,"NAT_FROM_EOCT3":null,"NAT_FROM_EOCT4":null,"ECT":"None","DUPLICATES":null,"CMIDS":null,"TS_CREATED":"14-Dec-17 11:04:20"},{"ID":"10838","COMMS_MATRIX_ID":"729","FILENAME":"INC000023081620-Stage_Universal_Communication_Matrix1.xlsx","CMLINE":"23","SRC":"x.x.x.x","SRC_NET":"x.x.x.x\/25","SRC_ZONE":"s.v.l","SRC_SECZONE":"C2","SRC_NETZONE":"VOD","SRC_LOCZONE":"RAT","DST":"x.x.x.x","DST_NET":"139.47.171.0\/27","DST_ZONE":"s.v.l","DST_SECZONE":"TP","DST_NETZONE":"VOD","DST_LOCZONE":"RAT","SPA":"Deny","SPN":"Flow is denied by the security zoning policy","RPA":"Permit","RPN":"Flow is permitted within the same routing domain","FPA":"Permit","FPN":"Flow is permitted using an acceptable port","STATUS":"To implement","PROTOCOL":"TCP","PORTS":"80","NAT_DIR":null,"NAT_IP":null,"ENVIRONMENT":"none","SERVICE_GROUPING":null,"TRACK":"1.5","REMARKS":"EXTERNAL REVERSE PROXY 2 TO MID-TIER LOAD BALANCER","DROW":"9","SRC_DESC":"008","DST_DESC":null,"REMEDY_INC":null,"CREATED_BY":"UddinS2","UPDATED_BY":"UddinS2","SRC_SOCT1":"195","SRC_SOCT2":"232","SRC_SOCT3":"163","SRC_SOCT4":"11","SRC_EOCT1":"195","SRC_EOCT2":"232","SRC_EOCT3":"163","SRC_EOCT4":"11","SRC_CIDR":"32","SRC_NET_SOCT1":"195","SRC_NET_SOCT2":"232","SRC_NET_SOCT3":"163","SRC_NET_SOCT4":"0","SRC_NET_EOCT1":"195","SRC_NET_EOCT2":"232","SRC_NET_EOCT3":"163","SRC_NET_EOCT4":"127","SRC_NET_CIDR":"25","DST_SOCT1":"139","DST_SOCT2":"47","DST_SOCT3":"171","DST_SOCT4":"29","DST_EOCT1":"139","DST_EOCT2":"47","DST_EOCT3":"171","DST_EOCT4":"29","DST_CIDR":"32","DST_NET_SOCT1":"139","DST_NET_SOCT2":"47","DST_NET_SOCT3":"171","DST_NET_SOCT4":"0","DST_NET_EOCT1":"139","DST_NET_EOCT2":"47","DST_NET_EOCT3":"171","DST_NET_EOCT4":"31","DST_NET_CIDR":"27","NAT_TO":null,"NAT_TO_SOCT1":null,"NAT_TO_SOCT2":null,"NAT_TO_SOCT3":null,"NAT_TO_SOCT4":null,"NAT_TO_EOCT1":null,"NAT_TO_EOCT2":null,"NAT_TO_EOCT3":null,"NAT_TO_EOCT4":null,"NAT_FROM":null,"NAT_FROM_SOCT1":null,"NAT_FROM_SOCT2":null,"NAT_FROM_SOCT3":null,"NAT_FROM_SOCT4":null,"NAT_FROM_EOCT1":null,"NAT_FROM_EOCT2":null,"NAT_FROM_EOCT3":null,"NAT_FROM_EOCT4":null,"ECT":"None","DUPLICATES":null,"CMIDS":null,"TS_CREATED":"14-Dec-17 11:04:20"},{"ID":"10839","COMMS_MATRIX_ID":"729","FILENAME":"INC000023081620-Stage_Universal_Communication_Matrix1.xlsx","CMLINE":"24","SRC":"x.x.x.x","SRC_NET":"x.x.x.x\/25","SRC_ZONE":"s.v.l","SRC_SECZONE":"s","v":"l","SRC_LOCZONE":"s","DST":"x.x.x.x","DST_NET":"x.x.x.0\/27","DST_ZONE":"s.v.l","DST_SECZONE":"TP","DST_NETZONE":"VOD","DST_LOCZONE":"RAT","SPA":"Deny","SPN":"Flow is denied by the security zoning policy","RPA":"Permit","RPN":"Flow is permitted within the same routing domain","FPA":"Permit","FPN":"Flow is permitted using an acceptable port","STATUS":"To implement","PROTOCOL":"TCP","PORTS":"80","NAT_DIR":null,"NAT_IP":null,"ENVIRONMENT":"none","SERVICE_GROUPING":null,"TRACK":"1.5","REMARKS":"INTERNAL REVERSE PROXY 1 TO MID-TIER LOAD BALANCER","DROW":"9","SRC_DESC":"-209-207","DST_DESC":null,"REMEDY_INC":null,"CREATED_BY":"UddinS2","UPDATED_BY":"UddinS2","SRC_SOCT1":"195","SRC_SOCT2":"233","SRC_SOCT3":"209","SRC_SOCT4":"207","SRC_EOCT1":"195","SRC_EOCT2":"233","SRC_EOCT3":"209","SRC_EOCT4":"207","SRC_CIDR":"32","SRC_NET_SOCT1":"195","SRC_NET_SOCT2":"233","SRC_NET_SOCT3":"209","SRC_NET_SOCT4":"128","SRC_NET_EOCT1":"195","SRC_NET_EOCT2":"233","SRC_NET_EOCT3":"209","SRC_NET_EOCT4":"255","SRC_NET_CIDR":"25","DST_SOCT1":"139","DST_SOCT2":"47","DST_SOCT3":"171","DST_SOCT4":"29","DST_EOCT1":"139","DST_EOCT2":"47","DST_EOCT3":"171","DST_EOCT4":"29","DST_CIDR":"32","DST_NET_SOCT1":"139","DST_NET_SOCT2":"47","DST_NET_SOCT3":"171","DST_NET_SOCT4":"0","DST_NET_EOCT1":"139","DST_NET_EOCT2":"47","DST_NET_EOCT3":"171","DST_NET_EOCT4":"31","DST_NET_CIDR":"27","NAT_TO":null,"NAT_TO_SOCT1":null,"NAT_TO_SOCT2":null,"NAT_TO_SOCT3":null,"NAT_TO_SOCT4":null,"NAT_TO_EOCT1":null,"NAT_TO_EOCT2":null,"NAT_TO_EOCT3":null,"NAT_TO_EOCT4":null,"NAT_FROM":null,"NAT_FROM_SOCT1":null,"NAT_FROM_SOCT2":null,"NAT_FROM_SOCT3":null,"NAT_FROM_SOCT4":null,"NAT_FROM_EOCT1":null,"NAT_FROM_EOCT2":null,"NAT_FROM_EOCT3":null,"NAT_FROM_EOCT4":null,"ECT":"None","DUPLICATES":null,"CMIDS":null,"TS_CREATED":"14-Dec-17 11:04:20"},{"ID":"10840","COMMS_MATRIX_ID":"729","FILENAME":"INC000023081620-Stage_Universal_Communication_Matrix1.xlsx","CMLINE":"25","SRC":"x.x.x.x","SRC_NET":"x.x.x.x\/25","SRC_ZONE":"s.v.l","SRC_SECZONE":"E1","SRC_NETZONE":"VOD","SRC_LOCZONE":"RAT","DST":"x.x.x.x","DST_NET":"139.47.171.0\/27","DST_ZONE":"s.v.l","DST_SECZONE":"TP","DST_NETZONE":"VOD","DST_LOCZONE":"RAT","SPA":"Deny","SPN":"Flow is denied by the security zoning policy","RPA":"Permit","RPN":"Flow is permitted within the same routing domain","FPA":"Permit","FPN":"Flow is permitted using an acceptable port","STATUS":"To implement","PROTOCOL":"TCP","PORTS":"80","NAT_DIR":null,"NAT_IP":null,"ENVIRONMENT":"none","SERVICE_GROUPING":null,"TRACK":"1.5","REMARKS":"INTERNAL REVERSE PROXY 2 TO MID-TIER LOAD BALANCER","DROW":"9","SRC_DESC":"-209-208","DST_DESC":null,"REMEDY_INC":null,"CREATED_BY":"UddinS2","UPDATED_BY":"UddinS2","SRC_SOCT1":"195","SRC_SOCT2":"233","SRC_SOCT3":"209","SRC_SOCT4":"208","SRC_EOCT1":"195","SRC_EOCT2":"233","SRC_EOCT3":"209","SRC_EOCT4":"208","SRC_CIDR":"32","SRC_NET_SOCT1":"195","SRC_NET_SOCT2":"233","SRC_NET_SOCT3":"209","SRC_NET_SOCT4":"128","SRC_NET_EOCT1":"195","SRC_NET_EOCT2":"233","SRC_NET_EOCT3":"209","SRC_NET_EOCT4":"255","SRC_NET_CIDR":"25","DST_SOCT1":"139","DST_SOCT2":"47","DST_SOCT3":"171","DST_SOCT4":"29","DST_EOCT1":"139","DST_EOCT2":"47","DST_EOCT3":"171","DST_EOCT4":"29","DST_CIDR":"32","DST_NET_SOCT1":"139","DST_NET_SOCT2":"47","DST_NET_SOCT3":"171","DST_NET_SOCT4":"0","DST_NET_EOCT1":"139","DST_NET_EOCT2":"47","DST_NET_EOCT3":"171","DST_NET_EOCT4":"31","DST_NET_CIDR":"27","NAT_TO":null,"NAT_TO_SOCT1":null,"NAT_TO_SOCT2":null,"NAT_TO_SOCT3":null,"NAT_TO_SOCT4":null,"NAT_TO_EOCT1":null,"NAT_TO_EOCT2":null,"NAT_TO_EOCT3":null,"NAT_TO_EOCT4":null,"NAT_FROM":null,"NAT_FROM_SOCT1":null,"NAT_FROM_SOCT2":null,"NAT_FROM_SOCT3":null,"NAT_FROM_SOCT4":null,"NAT_FROM_EOCT1":null,"NAT_FROM_EOCT2":null,"NAT_FROM_EOCT3":null,"NAT_FROM_EOCT4":null,"ECT":"None","DUPLICATES":null,"CMIDS":null,"TS_CREATED":"14-Dec-17 11:04:20"}];
var buttons = {
text: 'Download',
className: 'btn btn-primary dropdown-toggle',
action: function ( e, dt, node, config ) {
}
};
var routing_analysis = false;
var servicedesign = false;
var techops = false;
var statuses = ['To implement','In progress','Implemented', 'To remove'];
var ccpProjectUser = false;
var frozen = false;
$(document).ready( function () {
var table = $('#dt-comms_matrix').DataTable({
dom: "<'row'<'col-md-6'l><'col-md-6'Bf>>" +
"<'row'<'col-md-6'><'col-md-6'>>" +
"<'row'<'col-md-12't>><'row'<'col-md-6'i><'col-md-6'p>>",
"bAutoWidth": false,
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"iDisplayLength": 25,
"processing": true,
"language": {
"loadingRecords": '<i class="fa fa-spinner fa-spin" aria-hidden="true"></i> Loading...',
"processing": '<i class="fa fa-spinner fa-spin" aria-hidden="true"></i> Processing...'
},
stateSave: true,
"order": [[ 2, "asc" ],[1,'asc']],
data: datax,
buttons: [
buttons,
'colvis'
],
"autoWidth": false,
"columnDefs": [
{
targets: [0,3],
"searchable": false,
"sortable": false
},
{
"targets": [ 4 ],
"searchable": false,
"sortable": false
},
{
"targets": [ 18 ],
"width": '100px'
},
],
"columns": [
{
"data": function(row,type,val,meta){
var error = false;
var html = '<div style="width:85px">';
html += '<input type="checkbox" name="select_download['+row.ID+']" data-value="'+row.ID+'" autocomplete="off" data-toggle="popover" data-content="Select to add flow to download" data-trigger="hover" />';
if(ccpProjectUser && !frozen){
html += '<span data-toggle="modal" data-target="#myModalForm" title="Click to edit row" data-row="'+meta.row+'" data-cmid="'+row.COMMS_MATRIX_ID+'" data-id="'+row.ID+'" data-src="'+row.SRC+'" data-src_desc="'+row.SRC_DESC+'" data-dst="'+row.DST+'" data-dst_desc="'+row.DST_DESC+'" data-protocol="'+row.PROTOCOL+'" data-ports="'+row.PORTS+'" data-environment="'+row.ENVIRONMENT+'" data-service_grouping="'+row.SERVICE_GROUPING+'" data-track="'+row.TRACK+'" data-remarks="'+row.REMARKS+'">';
html += '<a class="btn btn-sm btn-info" data-toggle="popover" data-content="Click to edit row" data-trigger="hover" href="javascript:void(0)"><i class="fa fa-pencil" aria-hidden="true"></i></a>';
html += '</span>';
html += '<a class="btn btn-sm btn-danger delete_comms_matrix_flow" data-toggle="popover" data-content="Delete flow" data-trigger="hover" href="javascript:void(0)" data-id="'+row.ID+'"><i class="fa fa-trash" aria-hidden="true"></i></a>';
}
if(error){
return html + '</div>';
}else{
html += '<button type="button" class="btn btn-sm btn-default btn_commsmatrix_ect" data-toggle="popover" data-trigger="hover" data-content="Queue for testing" style="color:#333" href="#" data-cmid="'+row.COMMS_MATRIX_ID+'" data-id="'+row.ID+'" data-src="'+row.SRC+'" data-dst="'+row.DST+'" data-protocol="'+row.PROTOCOL+'" data-ports="'+row.PORTS+'" data-spa="'+row.SPA+'" data-rpa="'+row.RPA+'" data-fpa="'+row.FPA+'"><i class="fa fa-cog" aria-hidden="true"></i></</button>';
}
html += '</div>';
return html;
},
},
{
"data": function(row,type,val,meta){
var dupes = '';
var content = '';
if(parseInt(row.DUPLICATES) > 0){
var cmids = row.CMIDS.split(", ");
for(var i=0;i<cmids.length;i++){
content += "<a href='"+window.location.protocol + "//" + window.location.host + "/api/user/commsmatrix/id/"+cmids[i]+"/format/xml" +"' target='_blank'>"+cmids[i]+"</a> ";
}
dupes = '<span data-toggle="popover" data-placement="top" data-title="duplicate flows" data-content="'+content+'" style="text-decoration:underline"><i class="fa fa-info-circle" aria-hidden="true"></i></span>';
}
if(routing_analysis){
var html = '<a target="_blank" href="/routing_analysis.php?src='+row.SRC+'&dst='+row.DST+'&proto='+row.PROTOCOL+'&port='+row.PORTS+'" data-toggle="popover" data-trigger="hover" data-content="Click to show routing analysis">'+row.ID+'</a>';
if(parseInt(row.DUPLICATES) > 0){
html += dupes;
}
return html;
}else{
if(parseInt(row.DUPLICATES) > 0){
return row.ID + dupes;
}
return row.ID;
}
}
},
{ "data": "CMLINE" },
{
"data": function(row,type,val,meta){
if(techops){
var html = '<div class="form-group">';
html += '<input type="checkbox" name="status[]" value="'+row.ID+'" class="form-control hidden-print">';
html += '<select id="'+row.ID+'_select" name="'+row.ID+'_select" class="status_option form-control">';
var selected = '';
for(i in statuses){
if(row.STATUS == statuses[i]){
selected = 'selected';
}
html += '<option value="'+statuses[i]+'" '+selected+'>'+statuses[i]+'</option>';
selected = '';
}
html += '</select></div>';
return html;
}else{
return row.STATUS;
}
}
},
{
"data": function(row,type,val,meta){
if(techops){
var inc = row.REMEDY_INC;
if(row.REMEDY_INC == null){
inc = '';
}
var html = '<input type="text" name="inc_'+row.ID+'" id="'+row.ID+'_inc" value="'+inc+'" maxlength="15" size="15" class="form-control" />';
return html;
}else{
return '';
}
}
},
{ "data": "SRC" },
{ "data": "SRC_DESC" },
{ "data": "SRC_ZONE" },
{ "data": "DST" },
{ "data": "DST_DESC" },
{ "data": "DST_ZONE" },
{ "data": "PROTOCOL" },
{ "data": "PORTS" },
{ "data": "NAT_DIR" },
{ "data": "NAT_IP" },
{ "data": "ENVIRONMENT" },
{ "data": "SERVICE_GROUPING" },
{ "data": "TRACK" },
{ "data": "REMARKS" },
{ "data": function(row,type,val,meta){
var html = '<span data-toggle="popover" data-trigger="hover" data-container="#dt-comms_matrix" data-content="<span style=\'color:black\'>'+row.SPN+'</span>">'+row.SPA+'</span>';
return html;
}
},
{ "data": "SPN" },
{ "data": function(row,type,val,meta){
var html = '<span data-toggle="popover" data-trigger="hover" data-container="#dt-comms_matrix" data-content="<span style=\'color:black\'>'+row.RPN+'</span>">'+row.RPA+'</span>';
return html;
}
},
{ "data": "RPN" },
{ "data": function(row,type,val,meta){
var html = '<span data-toggle="popover" data-trigger="hover" data-container="#dt-comms_matrix" data-content="<span style=\'color:black\'>'+row.FPN+'</span>">'+row.FPA+'</span>';
return html;
}
},
{ "data": "FPN" },
{
"data": function(row,type,val,meta){
var html = row.ECT;
if(row.ECT != 'None'){
html = ''+row.ECT+'';
}
return html;
}
},
],
});
} );

Answer 1

You will only be able to solve that with hardcoded CSS :
table#dt-comms_matrix thead tr:nth-child(2) th:nth-child(19) {
width: 400px;
min-width: 400px;
}
updated fiddle -> https://jsfiddle.net/aa9wnhd6/4/
table#dt-comms_matrix target the table
thead tr:nth-child(2) target the second header row
th:nth-child(19) target the 19th column
Alternatively set a class on the header element <th class="remarks"> and
table#dt-comms_matrix thead tr:nth-child(2) th.remarks { .. }
https://jsfiddle.net/aa9wnhd6/6/