DataTables misaligned-column-headings-using-sscrollx-sscrolly

misaligned-column-headings-using-sscrollx-sscrolly

by shorif2000

HTML

<title>misaligned-column-headings-using-sscrollx-sscrolly</title>



<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

<!--bootstrap-->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" charset="utf8" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!--datatabler-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>

<!--buttons-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.colVis.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>


<!--FixedColumns-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js"></script>

<!--FixedHeader-->
<link rel="stylesheet"...

CSS

@media ( min-width : 768px) {
	.modal-xl {
		width: 90%;
		max-width: 1200px;
	}
}

/***** SECOND MENU *****/
.nav-pills>li.active>a, .nav-pills>li.active>a:focus {
	color: #fff;
	background-color: #e60000;
}

.nav-pills>li.active>a:hover {
	background-color: #e60000;
	color: #fff;
}

.nav-pills>li>a:focus, .nav-pills>li>a:hover {
	color: #fff;
	text-decoration: none;
	background-color: #ee5f5b;
}

.nav-pills>li>a {
	color: #000;
	text-decoration: none;
	background-color: #eee;
	padding: 5px 10px;
}
/**********/

/***** DATATABLES *****/
div.dataTables_scroll { clear: both; }
table thead tr {
	font-size: 11px;
}

/*
.header_SITE, .header_JVCO_ID  {
	padding-right: 34px !important;
}
.header_INCIDENT_NUMBER {
	padding-right: 31px !important;
}
*/
table td, table th {
    border: 2px solid #fff;
}
/*
table thead tr th {
	padding: 2px;
}

table thead th, .DTFC_LeftHeadWrapper table thead th, table thead td, .DTFC_LeftHeadWrapper table thead td,
.table>thead>tr>th {
	border: 2px solid #fff;
	
}
*/

table.dataTable.nowrap th{
	font-size: 13px;
}

.dataTables_scrollBody tfoot{
	display: none;
}
/*
.table_group_header {
	border: 1px solid;
}
*/
/**********/

/***** TABLE CELLS *****/
/*table.vf td {
    text-align: center;
}
table.vf thead th{
	white-space: normal;
}*/

/* required for eng.on site*/
.opacity {
	opacity: 1;
}

.td_SUMMARY{
	font-size: smaller;
}

/** comments **/
.comments_loader {
   	width: 315px;
    color: black;
    text-align: left;
    display: block;
    white-space: normal;
    
}
.comments_loader span{
    display: inline-block;
    padding-right: 15px;
    width: 300px;
    font-size: smaller;
}
.comments_loader .fa-pencil{
    display: inline-block;
    cursor: pointer;
    float: right;
    vertical-align: top;
}

.amber {
	background-color: #FFBF00;
	color: #fff;
}

.amber span {
	padding: 8px;
    display: block;
}

.relative {
	height: 100%;
	position: relative;
}

.altered {
	background-color: #f10000;
    color: #fff;
}

.altered span...

JavaScript

$(document).ready(function() {
  $('#table_d').css('width','100%');
	oTable = $('#table_d').DataTable({
		dom: 'iBfrtp',
		buttons: [
            {
                extend:    'copyHtml5',
                text:      '<i class="fa fa-clipboard fa-1x" aria-hidden="true"></i>',
                titleAttr: 'Copy'
            },
            , {
                extend:	'excelHtml5',
                title:	'ANOC-COOS Reports from Remedy',
                text:	'<i class="fa fa-file-excel-o fa-1x"></i>',
                titleAttr:	'Excel'
            }
        ],
        
        deferRender: true,
        searchHighlight: true,
		'sScrollX': '100%',
		'scrollX': true,
		'sScrollXInner': '150%', 
		'sScrollY': ($(window).height()-520),
		scrollCollapse: true,
		'bScrollCollapse': true,
		'paging':   false,
		'info':     true,
		"lengthChange": true,
		fixedHeader: true,		
		fixedColumns:   true,	
		initComplete: function () {
			
            this.api().columns('.multi-select-filter').every( function () {
                var column = this;
                var select = $('<select class="form-control js-example-basic-multiple" multiple="multiple"><option value="">All</option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                 	   var val = $(this).val();

                 	   if(val != "" && val != null){
                 		   
                 		   val = val.join("|");
                 	   }else{
                 		   val = "";
                 	   }

                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );

           	 	var blank = false;
                column.data().unique().sort().each( function ( d, j ) {
                    var html = d;
                    var div = document.createElement("div");
                    div.innerHTML = html;
                    var text =...