如何设置HTML表格的动态高度和宽度？
我有一个带有JSON数据的HTML表，我正在使用数据表来修复表的标题和列，但是在修复这些表时，我必须设置一些宽度和高度
我想做的是
如何根据屏幕尺寸设置动态宽度和高度
我正在使用引导程序进行响应式设计，因此我希望打开的任何屏幕表都应采用该屏幕大小并根据该屏幕进行渲染
在这样做的时候
fixedColumns: {
leftColumns: 2
}
前2列显示为滚动条，这也是一个不良的用户界面，例如
是否存在任何浏览器依赖性，因为在chrome上呈现良好，但是在Mozilla上，它看起来像我上传的图像
我的代码看起来很大，但实际上，不是在我的javascript代码中注释了添加数据表功能的那一行
幕布斯6054654浏览 305回答 1
1回答
-
慕妹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-->
随时随地看视频慕课网APP
相关分类
JavaScript