慕妹3242003
您的第一个错误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;}还<table>通过<div>标签更改了#tblOlcounterWise标签，因为将<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-->