如何为 HTML 表格设置动态高度和宽度？

Question

我有一个带有 JSON 数据的 HTML 表，我正在使用数据表来修复表的标题和列，但是在修复这些时我必须设置一些宽度和高度

我想做的是

• 如何根据屏幕大小设置动态宽度和高度
• 我正在使用引导程序进行响应式设计，所以我希望无论打开哪个屏幕表，它都应该采用该屏幕尺寸并根据该尺寸进行渲染
• 在做这件事的时候

fixedColumns: {
    leftColumns: 2
}

前两列也显示为滚动，这是糟糕的用户界面，如 是否有任何浏览器依赖性，因为在 chrome 上它呈现良好但在 Mozilla 上，它看起来像我上传的图像

 function format(number, decimals = 2, locale = 'en-in') { const fixed = parseInt(number).toFixed(decimals); const [int, dec] = fixed.split('.') const intFormatted = (+int).toLocaleString(locale) return intFormatted + (dec ? '.' + dec : ''); } var data = [{ "amount": 135116, "billdate": "2018-08-04", "counter": "South Indian-1-Flr", "outlet": "JAYANAGAR" }, { "amount": 133350, "billdate": "2018-08-04", "counter": "South Indian-2-Flr", "outlet": "JAYANAGAR" }, { "amount": 89092, "billdate": "2018-08-04", "counter": "Take-away counter 1", "outlet": "JAYANAGAR" }, { "amount": 61661, "billdate": "2018-08-04", "counter": "Coffee Counter", "outlet": "JAYANAGAR" }, { "amount": 80568, "billdate": "2018-08-04", "counter": "Trade Pos1", "outlet": "JAYANAGAR" }, { "amount": 18425, "billdate": "2018-08-04", "counter": "Trade Pos 2", "outlet": "JAYANAGAR" }, { "amount": 64091, "billdate": "2018-08-04", "counter": "Restaurant", "outlet": "MALLESHWARAM" }, { "amount": 16234, "billdate": "2018-08-04", "counter": "Coffee Counter", "outlet": "MALLESHWARAM" }, { "amount": 6233, "billdate": "2018-08-04", "counter": "Takeaway", "outlet": "MALLESHWARAM" }, { "amount": 18243, "billdate": "2018-08-04", "counter": "Trade POS", "outlet": "MALLESHWARAM" }, { "amount": 69946, "billdate": "2018-09-02", "counter": "Restaurant", "outlet": "MALLESHWARAM" }, { "amount": 18197, "billdate": "2018-09-02", "counter": "Coffee Counter", "outlet": "MALLESHWARAM" }, { "amount": 8741, "billdate": "2018-09-02", "counter": "Takeaway", "outlet": "MALLESHWARAM" }, { "amount": 18820, "billdate": "2018-09-02", "counter": "Trade POS", "outlet": "MALLESHWARAM" }, { "amount": 78537, "billdate": "2018-09-02", "counter": "Restaurant", "outlet": "KOLAR" }, { "amount": 5060, "billdate": "2018-09-02", "counter": "Trade POS", "outlet": "KOLAR" }, { "amount": 49096, "billdate": "2018-09-03", "counter": "Take-away counter 1", "outlet": "JAYANAGAR" }, { "amount": 58477, "billdate": "2018-09-03", "counter": "Coffee Counter", "outlet": "JAYANAGAR" }, { "amount": 49933, "billdate": "2018-09-03", "counter": "Trade Pos1", "outlet": "JAYANAGAR" }, { "amount": 9915, "billdate": "2018-09-03", "counter": "Trade Pos 2", "outlet": "JAYANAGAR" }, { "amount": 51209, "billdate": "2018-09-03", "counter": "Restaurant", "outlet": "KOLAR" }, { "amount": 2566, "billdate": "2018-09-03", "counter": "Trade POS", "outlet": "KOLAR" }, { "amount": 19602, "billdate": "2018-09-04", "counter": "North Indian", "outlet": "JAYANAGAR" }, { "amount": 84490, "billdate": "2018-09-04", "counter": "South Indian-1-Flr", "outlet": "JAYANAGAR" }, { "amount": 47952, "billdate": "2018-09-04", "counter": "Take-away counter 1", "outlet": "JAYANAGAR" }, { "amount": 56191, "billdate": "2018-09-04", "counter": "Coffee Counter", "outlet": "JAYANAGAR" }, { "amount": 56829, "billdate": "2018-09-04", "counter": "Trade Pos1", "outlet": "JAYANAGAR" }, { "amount": 4648, "billdate": "2018-09-04", "counter": "Trade Pos 2", "outlet": "JAYANAGAR" }, { "amount": 26051, "billdate": "2018-09-04", "counter": "Restaurant", "outlet": "MALLESHWARAM" }, { "amount": 14206, "billdate": "2018-09-04", "counter": "Coffee Counter", "outlet": "MALLESHWARAM" }, { "amount": 4322, "billdate": "2018-09-04", "counter": "Takeaway", "outlet": "MALLESHWARAM" }, { "amount": 14271, "billdate": "2018-09-04", "counter": "Trade POS", "outlet": "MALLESHWARAM" }, { "amount": 82248, "billdate": "2018-09-04", "counter": "Restaurant", "outlet": "KOLAR" }, { "amount": 751, "billdate": "2018-09-04", "counter": "Trade POS", "outlet": "KOLAR" } ] function formatData(data) { let toReturn = []; let dateWiseObj = {}; let maxUniqueForOutlets = {}; data.forEach(function(d) { if (!maxUniqueForOutlets[d["outlet"]]) { maxUniqueForOutlets[d["outlet"]] = []; } if (maxUniqueForOutlets[d["outlet"]].indexOf(d["counter"]) == -1) { maxUniqueForOutlets[d["outlet"]].push(d["counter"]); } if (!dateWiseObj[d["billdate"]]) { dateWiseObj[d["billdate"]] = {}; dateWiseObj[d["billdate"]][d["outlet"]] = {}; dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d; } else { if (!dateWiseObj[d["billdate"]][d["outlet"]]) { dateWiseObj[d["billdate"]][d["outlet"]] = {}; dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d; } else { if (!dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]]) { dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d; } } } }); return { dateWiseObj: dateWiseObj, maxUniqueForOutlets: maxUniqueForOutlets }; }; function addTable(dataObj) { let dateWiseObj = dataObj.dateWiseObj; let maxUniqueForOutlets = dataObj.maxUniqueForOutlets; let table = document.createElement("table"); let thead = document.createElement("thead"); let headerRow = document.createElement("tr"); let th = document.createElement("th"); th.innerHTML = "Outlet"; th.classList.add("text-center"); headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "Totals"; th.classList.add("text-center"); headerRow.appendChild(th); Object.keys(maxUniqueForOutlets).forEach(function(d) { th = document.createElement("th"); th.innerHTML = d; // ol names th.classList.add("text-center"); th.colSpan = maxUniqueForOutlets[d].length + 1; headerRow.appendChild(th); }); thead.appendChild(headerRow); headerRow = document.createElement("tr"); th = document.createElement("th"); th.innerHTML = "BillDate"; th.classList.add("text-center"); headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "Counter"; th.classList.add("text-center"); headerRow.appendChild(th); Object.keys(maxUniqueForOutlets).forEach(function(k) { th = document.createElement("th"); th.innerHTML = "Total"; th.classList.add("text-center"); headerRow.appendChild(th); maxUniqueForOutlets[k].forEach(function(d) { th = document.createElement("th"); th.innerHTML = d; //counters name th.classList.add("text-center"); headerRow.appendChild(th); }); }); thead.appendChild(headerRow); table.appendChild(thead); let tbody = document.createElement("tbody"); headerRow = document.createElement("tr"); let completeTotal = 0; let outletandCounterWiseCompleteTotal = {}; Object.keys(dateWiseObj).forEach(function(k) { let row = document.createElement("tr"); let td = document.createElement("td"); td.innerHTML = k; //billdate row.appendChild(td); grandTotal = 0; outletWiseTotal = {}; Object.keys(maxUniqueForOutlets).map(function(d) { if (!outletandCounterWiseCompleteTotal[d]) outletandCounterWiseCompleteTotal[d] = {}; outletWiseTotal[d] = 0; if (dateWiseObj[k][d]) { Object.keys(dateWiseObj[k][d]).forEach(function(i) { if (outletandCounterWiseCompleteTotal[d][i]) { outletandCounterWiseCompleteTotal[d][i] += parseInt(dateWiseObj[k][d][i]["amount"] || "0"); } else { outletandCounterWiseCompleteTotal[d][i] = parseInt(dateWiseObj[k][d][i]["amount"] || "0"); } outletWiseTotal[d] += parseInt(dateWiseObj[k][d][i]["amount"] || "0"); }); } if (outletandCounterWiseCompleteTotal[d]["total"]) outletandCounterWiseCompleteTotal[d]["total"] += outletWiseTotal[d]; else outletandCounterWiseCompleteTotal[d]["total"] = outletWiseTotal[d]; grandTotal += outletWiseTotal[d]; }); td = document.createElement("td"); td.innerHTML = grandTotal.toLocaleString('en-IN'); td.classList.add("text-right"); //grandTotal full column row.appendChild(td); Object.keys(maxUniqueForOutlets).map(function(d) { td = document.createElement("td"); td.innerHTML = outletWiseTotal[d].toLocaleString('en-IN'); td.classList.add("text-right"); //outlet total row.appendChild(td); if (dateWiseObj[k][d]) { maxUniqueForOutlets[d].forEach(function(i) { td = document.createElement("td"); td.innerHTML = dateWiseObj[k][d][i] ? dateWiseObj[k][d][i]["amount"].toLocaleString('en-IN') : "0"; td.classList.add("text-right"); //all total row.appendChild(td); }); } else { maxUniqueForOutlets[d].forEach(function(i) { td = document.createElement("td"); td.innerHTML = "0"; td.classList.add("text-right"); row.appendChild(td); }); } }); tbody.appendChild(row); completeTotal += grandTotal; //console.log(outletWiseTotal); }); th = document.createElement("th"); th.innerHTML = "Total"; headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = completeTotal.toLocaleString('en-IN'); th.classList.add("text-right"); //complete total of all headerRow.appendChild(th); Object.keys(maxUniqueForOutlets).forEach(function(d) { if (outletandCounterWiseCompleteTotal[d] && outletandCounterWiseCompleteTotal[d]["total"]) { th = document.createElement("th"); th.innerHTML = outletandCounterWiseCompleteTotal[d]["total"].toLocaleString('en-IN'); th.classList.add("text-right"); headerRow.appendChild(th); } else { th = document.createElement("th"); th.innerHTML = 0; headerRow.appendChild(th); } maxUniqueForOutlets[d].forEach(function(i) { if (outletandCounterWiseCompleteTotal[d] && outletandCounterWiseCompleteTotal[d][i]) { th = document.createElement("th"); th.innerHTML = outletandCounterWiseCompleteTotal[d][i].toLocaleString('en-IN'); th.classList.add("text-right"); headerRow.appendChild(th); } else { th = document.createElement("th"); th.innerHTML = 0; headerRow.appendChild(th); } }); }); thead.appendChild(headerRow); table.appendChild(tbody); let divContainer = document.getElementById("tblOlcounterWise"); divContainer.innerHTML = ""; divContainer.appendChild(table); table.classList.add("table"); table.classList.add("table-striped"); table.classList.add("table-bordered"); table.classList.add("table-hover"); $(table).DataTable({ //adding datatabl functionality "scrollX": true, "scrollY": "200px", "scrollCollapse": true, "paging": false, "info": false, "ordering": false, "searching": false, fixedColumns: { leftColumns: 2 } }); } var dataObj = formatData(data); addTable(dataObj);

 div.dataTables_wrapper { width: 500px; /*how to make this dynamic*/ margin: 0 auto; } table { border-collapse: collapse; } table.table-bordered>thead>tr>th { border: 1px solid white; white-space: nowrap; font-family: Verdana; font-size: 9pt; padding: 5px 5px 5px 5px; background-color: rgba(29, 150, 178, 1); font-weight: normal; text-align: center; color: white; } table.table-bordered>tbody>tr>td { border: 1px solid rgba(29, 150, 178, 1); white-space: nowrap; font-family: Verdana; font-size: 8pt; background-color: rgba(84, 83, 72, .1); padding: 5px 5px 5px 5px; color: black; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/fc-3.2.5/fh-3.1.4/datatables.min.js"></script> <div align="center" class="table table-responsive"> <table id="tblOlcounterWise"></table> </div>

我的代码看起来很大，但实际上，我并没有评论我的 javascript 代码中添加数据表功能的行

编辑

每当增加表的行数没有正确垂直滚动时，固定列是固定的，它们不会与所有元素垂直滚动

[{"amount":49644,"billdate":"2018-09-01","counter":"North Indian","outlet":"JAYANAGAR"},{"amount":194495,"billdate":"2018-09-01","counter":"South Indian-1-Flr","outlet":"JAYANAGAR"},{"amount":80768,"billdate":"2018-09-01","counter":"Take-away counter 1","outlet":"JAYANAGAR"},{"amount":60878,"billdate":"2018-09-01","counter":"Coffee Counter","outlet":"JAYANAGAR"},{"amount":81999,"billdate":"2018-09-01","counter":"Trade Pos1","outlet":"JAYANAGAR"},{"amount":8642,"billdate":"2018-09-01","counter":"Trade Pos 2","outlet":"JAYANAGAR"},{"amount":53822,"billdate":"2018-09-01","counter":"Restaurant","outlet":"MALLESHWARAM"},{"amount":15339,"billdate":"2018-09-01","counter":"Coffee Counter","outlet":"MALLESHWARAM"},{"amount":7548,"billdate":"2018-09-01","counter":"Takeaway","outlet":"MALLESHWARAM"},{"amount":15432,"billdate":"2018-09-01","counter":"Trade POS","outlet":"MALLESHWARAM"},{"amount":107602,"billdate":"2018-09-01","counter":"Restaurant","outlet":"KOLAR"},{"amount":7711,"billdate":"2018-09-01","counter":"Trade POS","outlet":"KOLAR"},{"amount":39,"billdate":"2018-09-02","counter":"North Indian","outlet":"JAYANAGAR"},{"amount":118647,"billdate":"2018-09-02","counter":"South Indian-1-Flr","outlet":"JAYANAGAR"},{"amount":119871,"billdate":"2018-09-02","counter":"South Indian-2-Flr","outlet":"JAYANAGAR"},{"amount":109527,"billdate":"2018-09-02","counter":"Take-away counter 1","outlet":"JAYANAGAR"},{"amount":64771,"billdate":"2018-09-02","counter":"Coffee Counter","outlet":"JAYANAGAR"},{"amount":78037,"billdate":"2018-09-02","counter":"Trade Pos1","outlet":"JAYANAGAR"},{"amount":20261,"billdate":"2018-09-02","counter":"Trade Pos 2","outlet":"JAYANAGAR"},{"amount":69946,"billdate":"2018-09-02","counter":"Restaurant","outlet":"MALLESHWARAM"},{"amount":18197,"billdate":"2018-09-02","counter":"Coffee Counter","outlet":"MALLESHWARAM"},{"amount":8741,"billdate":"2018-09-02","counter":"Takeaway","outlet":"MALLESHWARAM"},{"amount":18820,"billdate":"2018-09-02","counter":"Trade POS","outlet":"MALLESHWARAM"},{"amount":78537,"billdate":"2018-09-02","counter":"Restaurant","outlet":"KOLAR"},{"amount":5060,"billdate":"2018-09-02","counter":"Trade POS","outlet":"KOLAR"},{"amount":49096,"billdate":"2018-09-03","counter":"Take-away counter 1","outlet":"JAYANAGAR"},{"amount":58477,"billdate":"2018-09-03","counter":"Coffee Counter","outlet":"JAYANAGAR"},{"amount":49933,"billdate":"2018-09-03","counter":"Trade Pos1","outlet":"JAYANAGAR"},{"amount":9915,"billdate":"2018-09-03","counter":"Trade Pos 2","outlet":"JAYANAGAR"},{"amount":51209,"billdate":"2018-09-03","counter":"Restaurant","outlet":"KOLAR"},{"amount":2566,"billdate":"2018-09-03","counter":"Trade POS","outlet":"KOLAR"},{"amount":19602,"billdate":"2018-09-04","counter":"North Indian","outlet":"JAYANAGAR"},{"amount":84490,"billdate":"2018-09-04","counter":"South Indian-1-Flr","outlet":"JAYANAGAR"},{"amount":47952,"billdate":"2018-09-04","counter":"Take-away counter 1","outlet":"JAYANAGAR"},{"amount":56191,"billdate":"2018-09-04","counter":"Coffee Counter","outlet":"JAYANAGAR"},{"amount":56829,"billdate":"2018-09-04","counter":"Trade Pos1","outlet":"JAYANAGAR"},{"amount":4648,"billdate":"2018-09-04","counter":"Trade Pos 2","outlet":"JAYANAGAR"},{"amount":26051,"billdate":"2018-09-04","counter":"Restaurant","outlet":"MALLESHWARAM"},{"amount":14206,"billdate":"2018-09-04","counter":"Coffee Counter","outlet":"MALLESHWARAM"},{"amount":4322,"billdate":"2018-09-04","counter":"Takeaway","outlet":"MALLESHWARAM"},{"amount":14271,"billdate":"2018-09-04","counter":"Trade POS","outlet":"MALLESHWARAM"},{"amount":82248,"billdate":"2018-09-04","counter":"Restaurant","outlet":"KOLAR"},{"amount":751,"billdate":"2018-09-04","counter":"Trade POS","outlet":"KOLAR"},{"amount":31224,"billdate":"2018-09-05","counter":"North Indian","outlet":"JAYANAGAR"},{"amount":135675,"billdate":"2018-09-05","counter":"South Indian-1-Flr","outlet":"JAYANAGAR"},{"amount":50704,"billdate":"2018-09-05","counter":"Take-away counter 1","outlet":"JAYANAGAR"},{"amount":55118,"billdate":"2018-09-05","counter":"Coffee Counter","outlet":"JAYANAGAR"},{"amount":49738,"billdate":"2018-09-05","counter":"Trade Pos1","outlet":"JAYANAGAR"},{"amount":13374,"billdate":"2018-09-05","counter":"Trade Pos 2","outlet":"JAYANAGAR"},{"amount":31923,"billdate":"2018-09-05","counter":"Restaurant","outlet":"MALLESHWARAM"},{"amount":14532,"billdate":"2018-09-05","counter":"Coffee Counter","outlet":"MALLESHWARAM"},{"amount":2792,"billdate":"2018-09-05","counter":"Takeaway","outlet":"MALLESHWARAM"},{"amount":16930,"billdate":"2018-09-05","counter":"Trade POS","outlet":"MALLESHWARAM"},{"amount":81019,"billdate":"2018-09-05","counter":"Restaurant","outlet":"KOLAR"},{"amount":4377,"billdate":"2018-09-05","counter":"Trade POS","outlet":"KOLAR"}]

Answer 1

您的第一个错误 Vivek 是使用 Bootstrap 进行响应。

你的第二个想法是响应式是某种魔术，例如 FixedColumns 插件可以解决任何情况。

响应式是一个设计问题，因此必须在您决定将哪种技术用于您的项目之前解决它。 应该设计您的数据表在每种设备格式下的外观。

但是，我将告诉您如何修复 Firefox 错误。 您只需要将此代码添加到您的 CSS 中：

.DTFC_LeftBodyLiner {
  overflow-y: initial!important;
  width: auto!important;
}

更新：在我们的聊天对话之后，我了解了你关于卷轴的另一个问题。 解决方案是删除引导响应表的组合：

<div align="center" class="table table-responsive">

并将div.dataTables_wrapper的宽度修改为 100% 并添加这个小 css：

.table.DTFC_Cloned {
  background-color: #fff;
}

还通过<div>标记更改 #tblOlcounterWise <table>标记，因为将<div>标记直接嵌入到<table>时会出现语法错误。

 function format(number, decimals = 2, locale = 'en-in') { const fixed = parseInt(number).toFixed(decimals); const [int, dec] = fixed.split('.') const intFormatted = (+int).toLocaleString(locale) return intFormatted + (dec ? '.' + dec : ''); } var data = [{ "amount": 135116, "billdate": "2018-08-04", "counter": "South Indian-1-Flr", "outlet": "JAYANAGAR" }, { "amount": 133350, "billdate": "2018-08-04", "counter": "South Indian-2-Flr", "outlet": "JAYANAGAR" }, { "amount": 89092, "billdate": "2018-08-04", "counter": "Take-away counter 1", "outlet": "JAYANAGAR" }, { "amount": 61661, "billdate": "2018-08-04", "counter": "Coffee Counter", "outlet": "JAYANAGAR" }, { "amount": 80568, "billdate": "2018-08-04", "counter": "Trade Pos1", "outlet": "JAYANAGAR" }, { "amount": 18425, "billdate": "2018-08-04", "counter": "Trade Pos 2", "outlet": "JAYANAGAR" }, { "amount": 64091, "billdate": "2018-08-04", "counter": "Restaurant", "outlet": "MALLESHWARAM" }, { "amount": 16234, "billdate": "2018-08-04", "counter": "Coffee Counter", "outlet": "MALLESHWARAM" }, { "amount": 6233, "billdate": "2018-08-04", "counter": "Takeaway", "outlet": "MALLESHWARAM" }, { "amount": 18243, "billdate": "2018-08-04", "counter": "Trade POS", "outlet": "MALLESHWARAM" }, { "amount": 69946, "billdate": "2018-09-02", "counter": "Restaurant", "outlet": "MALLESHWARAM" }, { "amount": 18197, "billdate": "2018-09-02", "counter": "Coffee Counter", "outlet": "MALLESHWARAM" }, { "amount": 8741, "billdate": "2018-09-02", "counter": "Takeaway", "outlet": "MALLESHWARAM" }, { "amount": 18820, "billdate": "2018-09-02", "counter": "Trade POS", "outlet": "MALLESHWARAM" }, { "amount": 78537, "billdate": "2018-09-02", "counter": "Restaurant", "outlet": "KOLAR" }, { "amount": 5060, "billdate": "2018-09-02", "counter": "Trade POS", "outlet": "KOLAR" }, { "amount": 49096, "billdate": "2018-09-03", "counter": "Take-away counter 1", "outlet": "JAYANAGAR" }, { "amount": 58477, "billdate": "2018-09-03", "counter": "Coffee Counter", "outlet": "JAYANAGAR" }, { "amount": 49933, "billdate": "2018-09-03", "counter": "Trade Pos1", "outlet": "JAYANAGAR" }, { "amount": 9915, "billdate": "2018-09-03", "counter": "Trade Pos 2", "outlet": "JAYANAGAR" }, { "amount": 51209, "billdate": "2018-09-03", "counter": "Restaurant", "outlet": "KOLAR" }, { "amount": 2566, "billdate": "2018-09-03", "counter": "Trade POS", "outlet": "KOLAR" }, { "amount": 19602, "billdate": "2018-09-04", "counter": "North Indian", "outlet": "JAYANAGAR" }, { "amount": 84490, "billdate": "2018-09-04", "counter": "South Indian-1-Flr", "outlet": "JAYANAGAR" }, { "amount": 47952, "billdate": "2018-09-04", "counter": "Take-away counter 1", "outlet": "JAYANAGAR" }, { "amount": 56191, "billdate": "2018-09-04", "counter": "Coffee Counter", "outlet": "JAYANAGAR" }, { "amount": 56829, "billdate": "2018-09-04", "counter": "Trade Pos1", "outlet": "JAYANAGAR" }, { "amount": 4648, "billdate": "2018-09-04", "counter": "Trade Pos 2", "outlet": "JAYANAGAR" }, { "amount": 26051, "billdate": "2018-09-04", "counter": "Restaurant", "outlet": "MALLESHWARAM" }, { "amount": 14206, "billdate": "2018-09-04", "counter": "Coffee Counter", "outlet": "MALLESHWARAM" }, { "amount": 4322, "billdate": "2018-09-04", "counter": "Takeaway", "outlet": "MALLESHWARAM" }, { "amount": 14271, "billdate": "2018-09-04", "counter": "Trade POS", "outlet": "MALLESHWARAM" }, { "amount": 82248, "billdate": "2018-09-04", "counter": "Restaurant", "outlet": "KOLAR" }, { "amount": 751, "billdate": "2018-09-04", "counter": "Trade POS", "outlet": "KOLAR" } ] function formatData(data) { let toReturn = []; let dateWiseObj = {}; let maxUniqueForOutlets = {}; data.forEach(function(d) { if (!maxUniqueForOutlets[d["outlet"]]) { maxUniqueForOutlets[d["outlet"]] = []; } if (maxUniqueForOutlets[d["outlet"]].indexOf(d["counter"]) == -1) { maxUniqueForOutlets[d["outlet"]].push(d["counter"]); } if (!dateWiseObj[d["billdate"]]) { dateWiseObj[d["billdate"]] = {}; dateWiseObj[d["billdate"]][d["outlet"]] = {}; dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d; } else { if (!dateWiseObj[d["billdate"]][d["outlet"]]) { dateWiseObj[d["billdate"]][d["outlet"]] = {}; dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d; } else { if (!dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]]) { dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d; } } } }); return { dateWiseObj: dateWiseObj, maxUniqueForOutlets: maxUniqueForOutlets }; }; function addTable(dataObj) { let dateWiseObj = dataObj.dateWiseObj; let maxUniqueForOutlets = dataObj.maxUniqueForOutlets; let table = document.createElement("table"); let thead = document.createElement("thead"); let headerRow = document.createElement("tr"); let th = document.createElement("th"); th.innerHTML = "Outlet"; th.classList.add("text-center"); headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "Totals"; th.classList.add("text-center"); headerRow.appendChild(th); Object.keys(maxUniqueForOutlets).forEach(function(d) { th = document.createElement("th"); th.innerHTML = d; // ol names th.classList.add("text-center"); th.colSpan = maxUniqueForOutlets[d].length + 1; headerRow.appendChild(th); }); thead.appendChild(headerRow); headerRow = document.createElement("tr"); th = document.createElement("th"); th.innerHTML = "BillDate"; th.classList.add("text-center"); headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "Counter"; th.classList.add("text-center"); headerRow.appendChild(th); Object.keys(maxUniqueForOutlets).forEach(function(k) { th = document.createElement("th"); th.innerHTML = "Total"; th.classList.add("text-center"); headerRow.appendChild(th); maxUniqueForOutlets[k].forEach(function(d) { th = document.createElement("th"); th.innerHTML = d; //counters name th.classList.add("text-center"); headerRow.appendChild(th); }); }); thead.appendChild(headerRow); table.appendChild(thead); let tbody = document.createElement("tbody"); headerRow = document.createElement("tr"); let completeTotal = 0; let outletandCounterWiseCompleteTotal = {}; Object.keys(dateWiseObj).forEach(function(k) { let row = document.createElement("tr"); let td = document.createElement("td"); td.innerHTML = k; //billdate row.appendChild(td); grandTotal = 0; outletWiseTotal = {}; Object.keys(maxUniqueForOutlets).map(function(d) { if (!outletandCounterWiseCompleteTotal[d]) outletandCounterWiseCompleteTotal[d] = {}; outletWiseTotal[d] = 0; if (dateWiseObj[k][d]) { Object.keys(dateWiseObj[k][d]).forEach(function(i) { if (outletandCounterWiseCompleteTotal[d][i]) { outletandCounterWiseCompleteTotal[d][i] += parseInt(dateWiseObj[k][d][i]["amount"] || "0"); } else { outletandCounterWiseCompleteTotal[d][i] = parseInt(dateWiseObj[k][d][i]["amount"] || "0"); } outletWiseTotal[d] += parseInt(dateWiseObj[k][d][i]["amount"] || "0"); }); } if (outletandCounterWiseCompleteTotal[d]["total"]) outletandCounterWiseCompleteTotal[d]["total"] += outletWiseTotal[d]; else outletandCounterWiseCompleteTotal[d]["total"] = outletWiseTotal[d]; grandTotal += outletWiseTotal[d]; }); td = document.createElement("td"); td.innerHTML = grandTotal.toLocaleString('en-IN'); td.classList.add("text-right"); //grandTotal full column row.appendChild(td); Object.keys(maxUniqueForOutlets).map(function(d) { td = document.createElement("td"); td.innerHTML = outletWiseTotal[d].toLocaleString('en-IN'); td.classList.add("text-right"); //outlet total row.appendChild(td); if (dateWiseObj[k][d]) { maxUniqueForOutlets[d].forEach(function(i) { td = document.createElement("td"); td.innerHTML = dateWiseObj[k][d][i] ? dateWiseObj[k][d][i]["amount"].toLocaleString('en-IN') : "0"; td.classList.add("text-right"); //all total row.appendChild(td); }); } else { maxUniqueForOutlets[d].forEach(function(i) { td = document.createElement("td"); td.innerHTML = "0"; td.classList.add("text-right"); row.appendChild(td); }); } }); tbody.appendChild(row); completeTotal += grandTotal; //console.log(outletWiseTotal); }); th = document.createElement("th"); th.innerHTML = "Total"; headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = completeTotal.toLocaleString('en-IN'); th.classList.add("text-right"); //complete total of all headerRow.appendChild(th); Object.keys(maxUniqueForOutlets).forEach(function(d) { if (outletandCounterWiseCompleteTotal[d] && outletandCounterWiseCompleteTotal[d]["total"]) { th = document.createElement("th"); th.innerHTML = outletandCounterWiseCompleteTotal[d]["total"].toLocaleString('en-IN'); th.classList.add("text-right"); headerRow.appendChild(th); } else { th = document.createElement("th"); th.innerHTML = 0; headerRow.appendChild(th); } maxUniqueForOutlets[d].forEach(function(i) { if (outletandCounterWiseCompleteTotal[d] && outletandCounterWiseCompleteTotal[d][i]) { th = document.createElement("th"); th.innerHTML = outletandCounterWiseCompleteTotal[d][i].toLocaleString('en-IN'); th.classList.add("text-right"); headerRow.appendChild(th); } else { th = document.createElement("th"); th.innerHTML = 0; headerRow.appendChild(th); } }); }); thead.appendChild(headerRow); table.appendChild(tbody); let divContainer = document.getElementById("tblOlcounterWise"); divContainer.innerHTML = ""; divContainer.appendChild(table); table.classList.add("table"); table.classList.add("table-striped"); table.classList.add("table-bordered"); table.classList.add("table-hover"); var $winHeight = $(document).height(); var $bodyHeight = $winHeight - 90; $(table).DataTable({ //adding datatabl functionality "scrollX": true, "scrollY": $bodyHeight + "px", "scrollCollapse": true, "paging": false, "info": false, "ordering": false, "searching": false, fixedColumns: { leftColumns: 2 } }); } var dataObj = formatData(data); addTable(dataObj);

 div.dataTables_wrapper { width: 100%; /*how to make this dynamic*/ margin: 0 auto; } table { border-collapse: collapse; } table.table-bordered>thead>tr>th { border: 1px solid white; white-space: nowrap; font-family: Verdana; font-size: 9pt; padding: 5px 5px 5px 5px; background-color: rgba(29, 150, 178, 1); font-weight: normal; text-align: center; color: white; } table.table-bordered>tbody>tr>td { border: 1px solid rgba(29, 150, 178, 1); white-space: nowrap; font-family: Verdana; font-size: 8pt; background-color: rgba(84, 83, 72, .1); padding: 5px 5px 5px 5px; color: black; } .DTFC_LeftBodyLiner { overflow-y: initial!important; width: auto!important; } .table.DTFC_Cloned { background-color: #fff; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/fc-3.2.5/fh-3.1.4/datatables.min.js"></script> <!--div align="center" class="table table-responsive"--> <div id="tblOlcounterWise"></div> <!--/div-->