html{ overflow-y:hidden; } * { box-sizing: border-box; } /* Create three equal columns that floats next to each other */ .column { float: left; width: 33.33%; padding: 10px; text-align: center; height: 280px; /* Should be removed. Only for demonstration */ } .row { padding-left: 10px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } Location ??? Exit page <script> $( document ).ready(function() { $(".footer").hide(); $("body").css("padding", "0"); $(".navigation").css("display", "none"); $(".header").css("display", "none"); $('[role="navigation"]').css("display", "none"); }); var locations = new Tabulator("#locations-table", { layout:"fitColumns", ajaxProgressiveLoad:"scroll", paginationSize:20, layout:"fitColumns", height:600, width:1200, placeholder:"No Data Set", selectable: true, columns:[ {title:"Harness #", field:"harn_name",headerFilter:"input",}, {title:"Name", field:"name",sorter:"string",headerFilter:"input",}, {title:"Signal Name", field:"signal",sorter:"string",headerFilter:"input",}, {title:"Wire Colour", field:"color",sorter:"string",headerFilter:"input",}, {title:"Marking Colour", field:"marking_color", width:180,sorter:"string",headerFilter:"input",}, {title:"AWG", field:"awg", formatter: "html",headerFilter:"input",sorter: function(a, b, aRow, bRow, column, dir, sorterParams){ const aV = Number(a.split("AWG ")[1]); const bV = Number(b.split("AWG ")[1]); return aV - bV; }}, {title:"Length ", field:"length_"}, {title:"Amount ", field:"amount"}, {title:"Location Name", field:"loc_name", formatter:"html",align: "center"}, ] }); var http_request = new XMLHttpRequest(); http_request.onreadystatechange = function () { if ( http_request.readyState == 4 ) { if ( http_request.status == 200 ) { let data = JSON.parse(http_request.responseText); let dataForTable = []; for (let i = 0; i