堆栈内存溢出
  繁体   English   中英

如何使html表的tbody垂直滚动

[英]How to make tbody of html table scroll vertically

 原文  2019-03-06 06:25:51  0   6    javascript/ jquery/ html/ css3/ html-table

问题描述

我有一个带有JSON数据的HTML表格，其中我正在尝试使用修复标题使tbody垂直滚动

我试图让tbody垂直滚动，以便用户只能在单页中查看数据。

我做了什么 

 var data = [{ "billdate": "2018-08-01", "outlet": "JAYANAGAR", "gross": 274659, "discount": 297, "GST": 16479, "amount": 290954 }, { "billdate": "2018-08-01", "outlet": "MALLESHWARAM", "gross": 55185, "discount": 0, "GST": 3074, "amount": 58281 }, { "billdate": "2018-08-01", "outlet": "KOLAR", "gross": 62513, "discount": 0, "GST": 3306, "amount": 65880 }, { "billdate": "2018-08-02", "outlet": "JAYANAGAR", "gross": 279509, "discount": 68, "GST": 16582, "amount": 296125 }, { "billdate": "2018-08-02", "outlet": "MALLESHWARAM", "gross": 53462, "discount": 0, "GST": 3064, "amount": 56545 }, { "billdate": "2018-08-02", "outlet": "KOLAR", "gross": 68651, "discount": 0, "GST": 3492, "amount": 72213 }, { "billdate": "2018-08-03", "outlet": "JAYANAGAR", "gross": 327097, "discount": 539, "GST": 19945, "amount": 346605 }, { "billdate": "2018-08-03", "outlet": "MALLESHWARAM", "gross": 59341, "discount": 105, "GST": 3370, "amount": 62459 }, { "billdate": "2018-08-03", "outlet": "KOLAR", "gross": 61953, "discount": 0, "GST": 3225, "amount": 65248 }, { "billdate": "2018-08-04", "outlet": "JAYANAGAR", "gross": 490465, "discount": 839, "GST": 28465, "amount": 518212 }, { "billdate": "2018-08-04", "outlet": "MALLESHWARAM", "gross": 99212, "discount": 0, "GST": 5567, "amount": 104801 }, { "billdate": "2018-08-04", "outlet": "KOLAR", "gross": 131349, "discount": 0, "GST": 6676, "amount": 138151 }, { "billdate": "2018-08-05", "outlet": "JAYANAGAR", "gross": 594466, "discount": 591, "GST": 34374, "amount": 628358 }, { "billdate": "2018-08-05", "outlet": "MALLESHWARAM", "gross": 109134, "discount": 0, "GST": 6067, "amount": 115223 }, { "billdate": "2018-08-05", "outlet": "KOLAR", "gross": 127449, "discount": 0, "GST": 6511, "amount": 134107 }, { "billdate": "2018-08-06", "outlet": "JAYANAGAR", "gross": 167811, "discount": 0, "GST": 9968, "amount": 177866 }, { "billdate": "2018-08-06", "outlet": "KOLAR", "gross": 62796, "discount": 0, "GST": 3257, "amount": 66095 }, { "billdate": "2018-08-07", "outlet": "JAYANAGAR", "gross": 268298, "discount": 268, "GST": 15943, "amount": 284069 }, { "billdate": "2018-08-07", "outlet": "MALLESHWARAM", "gross": 55381, "discount": 0, "GST": 3383, "amount": 58789 }, { "billdate": "2018-08-07", "outlet": "KOLAR", "gross": 64586, "discount": 6, "GST": 3285, "amount": 67886 }, { "billdate": "2018-08-08", "outlet": "JAYANAGAR", "gross": 295544, "discount": 246, "GST": 17716, "amount": 313128 }, { "billdate": "2018-08-08", "outlet": "MALLESHWARAM", "gross": 56453, "discount": 0, "GST": 3462, "amount": 59939 }, { "billdate": "2018-08-08", "outlet": "KOLAR", "gross": 65159, "discount": 0, "GST": 3381, "amount": 68558 }, { "billdate": "2018-08-09", "outlet": "JAYANAGAR", "gross": 303778, "discount": 201, "GST": 18115, "amount": 321797 }, { "billdate": "2018-08-09", "outlet": "MALLESHWARAM", "gross": 60795, "discount": 0, "GST": 3620, "amount": 64431 }, { "billdate": "2018-08-09", "outlet": "KOLAR", "gross": 54495, "discount": 0, "GST": 2841, "amount": 57352 }, { "billdate": "2018-08-10", "outlet": "JAYANAGAR", "gross": 305223, "discount": 53, "GST": 18287, "amount": 323556 }, { "billdate": "2018-08-10", "outlet": "MALLESHWARAM", "gross": 55584, "discount": 36, "GST": 3207, "amount": 58772 }, { "billdate": "2018-08-10", "outlet": "KOLAR", "gross": 41584, "discount": 0, "GST": 2128, "amount": 43722 }, { "billdate": "2018-08-11", "outlet": "JAYANAGAR", "gross": 439024, "discount": 177, "GST": 25148, "amount": 464127 }, { "billdate": "2018-08-11", "outlet": "MALLESHWARAM", "gross": 88009, "discount": 0, "GST": 5090, "amount": 93110 }, { "billdate": "2018-08-11", "outlet": "KOLAR", "gross": 59188, "discount": 0, "GST": 3156, "amount": 62213 }, { "billdate": "2018-08-12", "outlet": "JAYANAGAR", "gross": 593776, "discount": 809, "GST": 33689, "amount": 626772 }, { "billdate": "2018-08-12", "outlet": "MALLESHWARAM", "gross": 119723, "discount": 45, "GST": 7245, "amount": 126933 }, { "billdate": "2018-08-12", "outlet": "KOLAR", "gross": 59926, "discount": 0, "GST": 3170, "amount": 63119 }, { "billdate": "2018-08-13", "outlet": "JAYANAGAR", "gross": 157580, "discount": 340, "GST": 10053, "amount": 167391 }, { "billdate": "2018-08-13", "outlet": "KOLAR", "gross": 25730, "discount": 0, "GST": 1368, "amount": 27110 }, { "billdate": "2018-08-14", "outlet": "JAYANAGAR", "gross": 260106, "discount": 298, "GST": 15181, "amount": 275115 }, { "billdate": "2018-08-14", "outlet": "MALLESHWARAM", "gross": 55145, "discount": 19, "GST": 3480, "amount": 58633 }, { "billdate": "2018-08-14", "outlet": "KOLAR", "gross": 36664, "discount": 0, "GST": 1916, "amount": 37920 }, { "billdate": "2018-08-15", "outlet": "JAYANAGAR", "gross": 478163, "discount": 688, "GST": 27138, "amount": 504753 }, { "billdate": "2018-08-15", "outlet": "MALLESHWARAM", "gross": 98179, "discount": 0, "GST": 5661, "amount": 103855 }, { "billdate": "2018-08-15", "outlet": "KOLAR", "gross": 98536, "discount": 0, "GST": 4964, "amount": 103519 }, { "billdate": "2018-08-16", "outlet": "JAYANAGAR", "gross": 277139, "discount": 594, "GST": 16406, "amount": 293049 }, { "billdate": "2018-08-16", "outlet": "MALLESHWARAM", "gross": 52828, "discount": 0, "GST": 3227, "amount": 56071 }, { "billdate": "2018-08-16", "outlet": "KOLAR", "gross": 53312, "discount": 0, "GST": 2730, "amount": 56061 }, { "billdate": "2018-08-17", "outlet": "JAYANAGAR", "gross": 329539, "discount": 91, "GST": 19882, "amount": 349456 }, { "billdate": "2018-08-17", "outlet": "MALLESHWARAM", "gross": 62946, "discount": 0, "GST": 3659, "amount": 66624 }, { "billdate": "2018-08-17", "outlet": "KOLAR", "gross": 69126, "discount": 0, "GST": 3501, "amount": 72643 }, { "billdate": "2018-08-18", "outlet": "JAYANAGAR", "gross": 443783, "discount": 724, "GST": 25712, "amount": 468771 }, { "billdate": "2018-08-18", "outlet": "MALLESHWARAM", "gross": 95622, "discount": 0, "GST": 5507, "amount": 101151 }, { "billdate": "2018-08-18", "outlet": "KOLAR", "gross": 107235, "discount": 0, "GST": 5683, "amount": 112950 }, { "billdate": "2018-08-19", "outlet": "JAYANAGAR", "gross": 517922, "discount": 181, "GST": 28972, "amount": 546845 }, { "billdate": "2018-08-19", "outlet": "MALLESHWARAM", "gross": 96821, "discount": 0, "GST": 5490, "amount": 102334 }, { "billdate": "2018-08-19", "outlet": "KOLAR", "gross": 94158, "discount": 0, "GST": 4909, "amount": 99089 }, { "billdate": "2018-08-20", "outlet": "JAYANAGAR", "gross": 156224, "discount": 35, "GST": 9423, "amount": 165700 }, { "billdate": "2018-08-20", "outlet": "KOLAR", "gross": 45547, "discount": 0, "GST": 2347, "amount": 47905 }, { "billdate": "2018-08-21", "outlet": "JAYANAGAR", "gross": 289268, "discount": 214, "GST": 17613, "amount": 306776 }, { "billdate": "2018-08-21", "outlet": "MALLESHWARAM", "gross": 57684, "discount": 0, "GST": 3374, "amount": 61080 }, { "billdate": "2018-08-21", "outlet": "KOLAR", "gross": 57725, "discount": 0, "GST": 2950, "amount": 60682 }, { "billdate": "2018-08-22", "outlet": "JAYANAGAR", "gross": 395657, "discount": 159, "GST": 22808, "amount": 418418 }, { "billdate": "2018-08-22", "outlet": "MALLESHWARAM", "gross": 82752, "discount": 0, "GST": 4618, "amount": 87390 }, { "billdate": "2018-08-22", "outlet": "KOLAR", "gross": 74048, "discount": 0, "GST": 3953, "amount": 77922 }, { "billdate": "2018-08-23", "outlet": "JAYANAGAR", "gross": 302731, "discount": 1124, "GST": 17774, "amount": 319472 }, { "billdate": "2018-08-23", "outlet": "MALLESHWARAM", "gross": 63555, "discount": 0, "GST": 3565, "amount": 67142 }, { "billdate": "2018-08-23", "outlet": "KOLAR", "gross": 53637, "discount": 0, "GST": 2860, "amount": 56506 }, { "billdate": "2018-08-24", "outlet": "JAYANAGAR", "gross": 284354, "discount": 774, "GST": 16423, "amount": 300111 }, { "billdate": "2018-08-24", "outlet": "MALLESHWARAM", "gross": 48130, "discount": 0, "GST": 2857, "amount": 50997 }, { "billdate": "2018-08-24", "outlet": "KOLAR", "gross": 55040, "discount": 0, "GST": 2871, "amount": 57926 } ] let formatData = function(data) { let billdates = []; let outlets = []; data.forEach(element => { if (billdates.indexOf(element.billdate) == -1) { billdates.push(element.billdate); } if (outlets.indexOf(element.outlet) == -1) { outlets.push(element.outlet); } }); return { data: data, billdates: billdates, outlets: outlets, }; }; let renderTable = function(data) { billdates = data.billdates; outlets = data.outlets; data = data.data; let tbl = document.getElementById("dailySales"); let table = document.createElement("table"); let thead = document.createElement("thead"); let headerRow = document.createElement("tr"); let th = document.createElement("th"); th.innerHTML = "BillDate"; th.classList.add("text-center"); headerRow.appendChild(th); let grandTotal = 0; let grandGross = 0; let grandDiscount = 0; let grandGst = 0; let outletWiseTotal = {}; let outletWiseGross = {}; let outletWiseDiscount = {}; let outletWiseGst = {}; th = document.createElement("th"); th.colSpan = 4; th.innerHTML = "Total"; th.classList.add("text-center"); headerRow.appendChild(th); outlets.forEach(element => { th = document.createElement("th"); th.colSpan = 4; th.innerHTML = element; th.classList.add("text-center"); headerRow.appendChild(th); outletWiseTotal[element] = 0; outletWiseGross[element] = 0; outletWiseDiscount[element] = 0; outletWiseGst[element] = 0; data.forEach(el => { if (el.outlet == element) { outletWiseTotal[element] += parseInt(el.amount); outletWiseGross[element] += parseInt(el.gross); outletWiseDiscount[element] += parseInt(el.discount); outletWiseGst[element] += parseInt(el.GST); } }); grandTotal += outletWiseTotal[element]; grandGross += outletWiseGross[element]; grandDiscount += outletWiseDiscount[element]; grandGst += outletWiseGst[element]; }); thead.appendChild(headerRow); headerRow = document.createElement("tr"); th = document.createElement("th"); th.innerHTML = ""; headerRow.appendChild(th); for (i = 0; i < outlets.length + 1; i++) { th = document.createElement("th"); th.innerHTML = "Discount"; th.classList.add("text-center"); headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "GST"; th.classList.add("text-center"); headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "Net Amount"; th.classList.add("text-center"); headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "Gross Amount"; th.classList.add("text-center"); headerRow.appendChild(th); } headerRow.insertBefore(th, headerRow.children[1]); thead.appendChild(headerRow); table.appendChild(thead); headerRow = document.createElement("tr"); td = document.createElement("th"); td.innerHTML = "Total"; td.classList.add("text-center"); headerRow.appendChild(td); outlets.forEach(element => { td = document.createElement("th"); td.innerHTML = outletWiseGross[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); td = document.createElement("th"); td.innerHTML = outletWiseDiscount[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); td = document.createElement("th"); td.innerHTML = outletWiseGst[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); td = document.createElement("th"); td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); }); td = document.createElement("th"); td.innerHTML = grandTotal.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); td = document.createElement("th"); td.innerHTML = grandGst.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); td = document.createElement("th"); td.innerHTML = grandDiscount.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); td = document.createElement("th"); td.innerHTML = grandGross.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); thead.appendChild(headerRow); table.appendChild(thead); let tbody = document.createElement("tbody"); billdates.forEach(element => { let row = document.createElement("tr"); td = document.createElement("td"); td.innerHTML = element; row.appendChild(td); let total = 0; let totalGross = 0; let totalDiscount = 0; let totalGST = 0; outlets.forEach(outlet => { let ta = 0; let tg = 0; let tdi = 0; let tgst = 0; data.forEach(d => { if (d.billdate == element && d.outlet == outlet) { total += parseInt(d.amount); totalGross += parseInt(d.gross); totalDiscount += parseInt(d.discount); totalGST += parseInt(d.GST); ta = d.amount; tg = d.gross; tdi = d.discount; tgst = d.GST; } }); td = document.createElement("td"); td.innerHTML = tg.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); td = document.createElement("td"); td.innerHTML = tdi.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); td = document.createElement("td"); td.innerHTML = tgst.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); td = document.createElement("td"); td.innerHTML = ta.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); }); /* console.log("row is : " , row.children ) */ td = document.createElement("td"); td.innerHTML = total.toLocaleString('en-IN'); td.classList.add("text-right"); row.insertBefore(td, row.children[1]); td = document.createElement("td"); td.innerHTML = totalGST.toLocaleString('en-IN'); td.classList.add("text-right"); row.insertBefore(td, row.children[1]); td = document.createElement("td"); td.innerHTML = totalDiscount.toLocaleString('en-IN'); td.classList.add("text-right"); row.insertBefore(td, row.children[1]); td = document.createElement("td"); td.innerHTML = totalGross.toLocaleString('en-IN'); td.classList.add("text-right"); row.insertBefore(td, row.children[1]); tbody.appendChild(row); }); table.appendChild(tbody); tbl.innerHTML = ""; tbl.appendChild(table); table.classList.add("table"); table.classList.add("table-striped"); table.classList.add("table-bordered"); table.classList.add("table-hover"); } let formatedData = formatData(data); renderTable(formatedData); 
 table.table-bordered>thead>tr>th { border: 1px solid white; white-space: nowrap; border-collapse: collapse; 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; } /* background-color: #00998C */ table.table-bordered>tbody>tr>td { border: 1px solid rgba(29, 150, 178, 1); white-space: nowrap; border-collapse: collapse; font-family: Verdana; font-size: 8pt; background-color: rgba(84, 83, 72, .1); padding: 5px 5px 5px 5px; } 
 <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"> <h1>Testing</h1> <div align="center" class="table table-responsive"> <table id="dailySales"> </table> </div>

因为我已经编辑了代码以明确我想要实现的目标，所以我试图让我的tbody滚动。

我愿意使用任何可以修复标头的jQuery或JavaScript资源。

6 个解决方案

解决方案1
 8 已采纳  2019-03-08 21:03:36

使用vh单位设置表格高度，这将解决不同的屏幕尺寸问题。 您还可以使用JavaScript更准确地设置响应屏幕的表格高度。

没有DataTables的固定标头表： 

 var data = [{ "billdate": "2018-08-01", "outlet": "JAYANAGAR", "gross": 274659, "discount": 297, "GST": 16479, "amount": 290954 }, { "billdate": "2018-08-01", "outlet": "MALLESHWARAM", "gross": 55185, "discount": 0, "GST": 3074, "amount": 58281 }, { "billdate": "2018-08-01", "outlet": "KOLAR", "gross": 62513, "discount": 0, "GST": 3306, "amount": 65880 }, { "billdate": "2018-08-02", "outlet": "JAYANAGAR", "gross": 279509, "discount": 68, "GST": 16582, "amount": 296125 }, { "billdate": "2018-08-02", "outlet": "MALLESHWARAM", "gross": 53462, "discount": 0, "GST": 3064, "amount": 56545 }, { "billdate": "2018-08-02", "outlet": "KOLAR", "gross": 68651, "discount": 0, "GST": 3492, "amount": 72213 }, { "billdate": "2018-08-03", "outlet": "JAYANAGAR", "gross": 327097, "discount": 539, "GST": 19945, "amount": 346605 }, { "billdate": "2018-08-03", "outlet": "MALLESHWARAM", "gross": 59341, "discount": 105, "GST": 3370, "amount": 62459 }, { "billdate": "2018-08-03", "outlet": "KOLAR", "gross": 61953, "discount": 0, "GST": 3225, "amount": 65248 }, { "billdate": "2018-08-04", "outlet": "JAYANAGAR", "gross": 490465, "discount": 839, "GST": 28465, "amount": 518212 }, { "billdate": "2018-08-04", "outlet": "MALLESHWARAM", "gross": 99212, "discount": 0, "GST": 5567, "amount": 104801 }, { "billdate": "2018-08-04", "outlet": "KOLAR", "gross": 131349, "discount": 0, "GST": 6676, "amount": 138151 }, { "billdate": "2018-08-05", "outlet": "JAYANAGAR", "gross": 594466, "discount": 591, "GST": 34374, "amount": 628358 }, { "billdate": "2018-08-05", "outlet": "MALLESHWARAM", "gross": 109134, "discount": 0, "GST": 6067, "amount": 115223 }, { "billdate": "2018-08-05", "outlet": "KOLAR", "gross": 127449, "discount": 0, "GST": 6511, "amount": 134107 }, { "billdate": "2018-08-06", "outlet": "JAYANAGAR", "gross": 167811, "discount": 0, "GST": 9968, "amount": 177866 }, { "billdate": "2018-08-06", "outlet": "KOLAR", "gross": 62796, "discount": 0, "GST": 3257, "amount": 66095 }, { "billdate": "2018-08-07", "outlet": "JAYANAGAR", "gross": 268298, "discount": 268, "GST": 15943, "amount": 284069 }, { "billdate": "2018-08-07", "outlet": "MALLESHWARAM", "gross": 55381, "discount": 0, "GST": 3383, "amount": 58789 }, { "billdate": "2018-08-07", "outlet": "KOLAR", "gross": 64586, "discount": 6, "GST": 3285, "amount": 67886 }, { "billdate": "2018-08-08", "outlet": "JAYANAGAR", "gross": 295544, "discount": 246, "GST": 17716, "amount": 313128 }, { "billdate": "2018-08-08", "outlet": "MALLESHWARAM", "gross": 56453, "discount": 0, "GST": 3462, "amount": 59939 }, { "billdate": "2018-08-08", "outlet": "KOLAR", "gross": 65159, "discount": 0, "GST": 3381, "amount": 68558 }, { "billdate": "2018-08-09", "outlet": "JAYANAGAR", "gross": 303778, "discount": 201, "GST": 18115, "amount": 321797 }, { "billdate": "2018-08-09", "outlet": "MALLESHWARAM", "gross": 60795, "discount": 0, "GST": 3620, "amount": 64431 }, { "billdate": "2018-08-09", "outlet": "KOLAR", "gross": 54495, "discount": 0, "GST": 2841, "amount": 57352 }, { "billdate": "2018-08-10", "outlet": "JAYANAGAR", "gross": 305223, "discount": 53, "GST": 18287, "amount": 323556 }, { "billdate": "2018-08-10", "outlet": "MALLESHWARAM", "gross": 55584, "discount": 36, "GST": 3207, "amount": 58772 }, { "billdate": "2018-08-10", "outlet": "KOLAR", "gross": 41584, "discount": 0, "GST": 2128, "amount": 43722 }, { "billdate": "2018-08-11", "outlet": "JAYANAGAR", "gross": 439024, "discount": 177, "GST": 25148, "amount": 464127 }, { "billdate": "2018-08-11", "outlet": "MALLESHWARAM", "gross": 88009, "discount": 0, "GST": 5090, "amount": 93110 }, { "billdate": "2018-08-11", "outlet": "KOLAR", "gross": 59188, "discount": 0, "GST": 3156, "amount": 62213 }, { "billdate": "2018-08-12", "outlet": "JAYANAGAR", "gross": 593776, "discount": 809, "GST": 33689, "amount": 626772 }, { "billdate": "2018-08-12", "outlet": "MALLESHWARAM", "gross": 119723, "discount": 45, "GST": 7245, "amount": 126933 }, { "billdate": "2018-08-12", "outlet": "KOLAR", "gross": 59926, "discount": 0, "GST": 3170, "amount": 63119 }, { "billdate": "2018-08-13", "outlet": "JAYANAGAR", "gross": 157580, "discount": 340, "GST": 10053, "amount": 167391 }, { "billdate": "2018-08-13", "outlet": "KOLAR", "gross": 25730, "discount": 0, "GST": 1368, "amount": 27110 }, { "billdate": "2018-08-14", "outlet": "JAYANAGAR", "gross": 260106, "discount": 298, "GST": 15181, "amount": 275115 }, { "billdate": "2018-08-14", "outlet": "MALLESHWARAM", "gross": 55145, "discount": 19, "GST": 3480, "amount": 58633 }, { "billdate": "2018-08-14", "outlet": "KOLAR", "gross": 36664, "discount": 0, "GST": 1916, "amount": 37920 }, { "billdate": "2018-08-15", "outlet": "JAYANAGAR", "gross": 478163, "discount": 688, "GST": 27138, "amount": 504753 }, { "billdate": "2018-08-15", "outlet": "MALLESHWARAM", "gross": 98179, "discount": 0, "GST": 5661, "amount": 103855 }, { "billdate": "2018-08-15", "outlet": "KOLAR", "gross": 98536, "discount": 0, "GST": 4964, "amount": 103519 }, { "billdate": "2018-08-16", "outlet": "JAYANAGAR", "gross": 277139, "discount": 594, "GST": 16406, "amount": 293049 }, { "billdate": "2018-08-16", "outlet": "MALLESHWARAM", "gross": 52828, "discount": 0, "GST": 3227, "amount": 56071 }, { "billdate": "2018-08-16", "outlet": "KOLAR", "gross": 53312, "discount": 0, "GST": 2730, "amount": 56061 }, { "billdate": "2018-08-17", "outlet": "JAYANAGAR", "gross": 329539, "discount": 91, "GST": 19882, "amount": 349456 }, { "billdate": "2018-08-17", "outlet": "MALLESHWARAM", "gross": 62946, "discount": 0, "GST": 3659, "amount": 66624 }, { "billdate": "2018-08-17", "outlet": "KOLAR", "gross": 69126, "discount": 0, "GST": 3501, "amount": 72643 }, { "billdate": "2018-08-18", "outlet": "JAYANAGAR", "gross": 443783, "discount": 724, "GST": 25712, "amount": 468771 }, { "billdate": "2018-08-18", "outlet": "MALLESHWARAM", "gross": 95622, "discount": 0, "GST": 5507, "amount": 101151 }, { "billdate": "2018-08-18", "outlet": "KOLAR", "gross": 107235, "discount": 0, "GST": 5683, "amount": 112950 }, { "billdate": "2018-08-19", "outlet": "JAYANAGAR", "gross": 517922, "discount": 181, "GST": 28972, "amount": 546845 }, { "billdate": "2018-08-19", "outlet": "MALLESHWARAM", "gross": 96821, "discount": 0, "GST": 5490, "amount": 102334 }, { "billdate": "2018-08-19", "outlet": "KOLAR", "gross": 94158, "discount": 0, "GST": 4909, "amount": 99089 }, { "billdate": "2018-08-20", "outlet": "JAYANAGAR", "gross": 156224, "discount": 35, "GST": 9423, "amount": 165700 }, { "billdate": "2018-08-20", "outlet": "KOLAR", "gross": 45547, "discount": 0, "GST": 2347, "amount": 47905 }, { "billdate": "2018-08-21", "outlet": "JAYANAGAR", "gross": 289268, "discount": 214, "GST": 17613, "amount": 306776 }, { "billdate": "2018-08-21", "outlet": "MALLESHWARAM", "gross": 57684, "discount": 0, "GST": 3374, "amount": 61080 }, { "billdate": "2018-08-21", "outlet": "KOLAR", "gross": 57725, "discount": 0, "GST": 2950, "amount": 60682 }, { "billdate": "2018-08-22", "outlet": "JAYANAGAR", "gross": 395657, "discount": 159, "GST": 22808, "amount": 418418 }, { "billdate": "2018-08-22", "outlet": "MALLESHWARAM", "gross": 82752, "discount": 0, "GST": 4618, "amount": 87390 }, { "billdate": "2018-08-22", "outlet": "KOLAR", "gross": 74048, "discount": 0, "GST": 3953, "amount": 77922 }, { "billdate": "2018-08-23", "outlet": "JAYANAGAR", "gross": 302731, "discount": 1124, "GST": 17774, "amount": 319472 }, { "billdate": "2018-08-23", "outlet": "MALLESHWARAM", "gross": 63555, "discount": 0, "GST": 3565, "amount": 67142 }, { "billdate": "2018-08-23", "outlet": "KOLAR", "gross": 53637, "discount": 0, "GST": 2860, "amount": 56506 }, { "billdate": "2018-08-24", "outlet": "JAYANAGAR", "gross": 284354, "discount": 774, "GST": 16423, "amount": 300111 }, { "billdate": "2018-08-24", "outlet": "MALLESHWARAM", "gross": 48130, "discount": 0, "GST": 2857, "amount": 50997 }, { "billdate": "2018-08-24", "outlet": "KOLAR", "gross": 55040, "discount": 0, "GST": 2871, "amount": 57926 } ] let formatData = function(data) { let billdates = []; let outlets = []; data.forEach(element => { if (billdates.indexOf(element.billdate) == -1) { billdates.push(element.billdate); } if (outlets.indexOf(element.outlet) == -1) { outlets.push(element.outlet); } }); return { data: data, billdates: billdates, outlets: outlets, }; }; let renderTable = function(data) { billdates = data.billdates; outlets = data.outlets; data = data.data; let tbl = document.getElementById("dailySales"); let table = document.createElement("table"); let thead = document.createElement("thead"); let headerRow = document.createElement("tr"); let th = document.createElement("th"); th.innerHTML = "BillDate"; th.classList.add("text-center"); headerRow.appendChild(th); let grandTotal = 0; let grandGross = 0; let grandDiscount = 0; let grandGst = 0; let outletWiseTotal = {}; let outletWiseGross = {}; let outletWiseDiscount = {}; let outletWiseGst = {}; th = document.createElement("th"); th.colSpan = 4; th.innerHTML = "Total"; th.classList.add("text-center"); headerRow.appendChild(th); outlets.forEach(element => { th = document.createElement("th"); th.colSpan = 4; th.innerHTML = element; th.classList.add("text-center"); headerRow.appendChild(th); outletWiseTotal[element] = 0; outletWiseGross[element] = 0; outletWiseDiscount[element] = 0; outletWiseGst[element] = 0; data.forEach(el => { if (el.outlet == element) { outletWiseTotal[element] += parseInt(el.amount); outletWiseGross[element] += parseInt(el.gross); outletWiseDiscount[element] += parseInt(el.discount); outletWiseGst[element] += parseInt(el.GST); } }); grandTotal += outletWiseTotal[element]; grandGross += outletWiseGross[element]; grandDiscount += outletWiseDiscount[element]; grandGst += outletWiseGst[element]; }); thead.appendChild(headerRow); headerRow = document.createElement("tr"); th = document.createElement("th"); th.innerHTML = ""; headerRow.appendChild(th); for (i = 0; i < outlets.length + 1; i++) { th = document.createElement("th"); th.innerHTML = "Discount"; th.classList.add("text-center"); headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "GST"; th.classList.add("text-center"); headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "Net Amount"; th.classList.add("text-center"); headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "Gross Amount"; th.classList.add("text-center"); headerRow.appendChild(th); } headerRow.insertBefore(th, headerRow.children[1]); thead.appendChild(headerRow); table.appendChild(thead); headerRow = document.createElement("tr"); td = document.createElement("th"); td.innerHTML = "Total"; td.classList.add("text-center"); headerRow.appendChild(td); outlets.forEach(element => { td = document.createElement("th"); td.innerHTML = outletWiseGross[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); td = document.createElement("th"); td.innerHTML = outletWiseDiscount[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); td = document.createElement("th"); td.innerHTML = outletWiseGst[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); td = document.createElement("th"); td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); }); td = document.createElement("th"); td.innerHTML = grandTotal.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); td = document.createElement("th"); td.innerHTML = grandGst.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); td = document.createElement("th"); td.innerHTML = grandDiscount.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); td = document.createElement("th"); td.innerHTML = grandGross.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); thead.appendChild(headerRow); table.appendChild(thead); let tbody = document.createElement("tbody"); billdates.forEach(element => { let row = document.createElement("tr"); td = document.createElement("td"); td.innerHTML = element; row.appendChild(td); let total = 0; let totalGross = 0; let totalDiscount = 0; let totalGST = 0; outlets.forEach(outlet => { let ta = 0; let tg = 0; let tdi = 0; let tgst = 0; data.forEach(d => { if (d.billdate == element && d.outlet == outlet) { total += parseInt(d.amount); totalGross += parseInt(d.gross); totalDiscount += parseInt(d.discount); totalGST += parseInt(d.GST); ta = d.amount; tg = d.gross; tdi = d.discount; tgst = d.GST; } }); td = document.createElement("td"); td.innerHTML = tg.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); td = document.createElement("td"); td.innerHTML = tdi.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); td = document.createElement("td"); td.innerHTML = tgst.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); td = document.createElement("td"); td.innerHTML = ta.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); }); /* console.log("row is : " , row.children ) */ td = document.createElement("td"); td.innerHTML = total.toLocaleString('en-IN'); td.classList.add("text-right"); row.insertBefore(td, row.children[1]); td = document.createElement("td"); td.innerHTML = totalGST.toLocaleString('en-IN'); td.classList.add("text-right"); row.insertBefore(td, row.children[1]); td = document.createElement("td"); td.innerHTML = totalDiscount.toLocaleString('en-IN'); td.classList.add("text-right"); row.insertBefore(td, row.children[1]); td = document.createElement("td"); td.innerHTML = totalGross.toLocaleString('en-IN'); td.classList.add("text-right"); row.insertBefore(td, row.children[1]); tbody.appendChild(row); }); table.appendChild(tbody); document.body.appendChild(table); table.classList.add("table"); table.classList.add("table-striped"); table.classList.add("table-bordered"); table.classList.add("table-hover"); wrapTable($(table)); } let formatedData = formatData(data); renderTable(formatedData); function wrapTable($table) { let $tableWrapper = $('<div>').addClass('table-wrapper').insertAfter($table); let $tableBodyWrapper = $('<div>').addClass('table-body-wrapper').appendTo($tableWrapper); let $tableWidthTracker = $('<div>').css('width', '100%').appendTo($tableBodyWrapper); $table.appendTo($tableBodyWrapper); let $tableHeadWrapper = $('<div>').addClass('table-head-wrapper').width($tableWidthTracker.width()).appendTo($tableWrapper); let $tableDuplicateHead = $table.clone().find("tbody").remove().end().appendTo($tableHeadWrapper); let $dupCols = $tableDuplicateHead.find('thead tr:last').children(); $table.find('thead tr:last').children().each(function(i) { $dupCols.eq(i).css('minWidth', $(this).outerWidth()); }); $tableBodyWrapper.on('scroll', function() { $tableHeadWrapper.scrollLeft($tableBodyWrapper.scrollLeft()); }); $(window).on('resize', function() { $tableHeadWrapper.width($tableWidthTracker.width()); }); } 
 table.table-bordered>thead>tr>th { border: 1px solid white; white-space: nowrap; border-collapse: collapse; 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; border-collapse: collapse; font-family: Verdana; font-size: 8pt; background-color: rgba(84, 83, 72, .1); padding: 5px 5px 5px 5px; } .table-wrapper { position: relative; margin: 10px; } .table-head-wrapper { overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; } .table-body-wrapper { height: 70vh; overflow: auto; } .table-body-wrapper>.table { margin: 0; } 
 <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"> <h1>Fixed Header</h1>

解决方案2
 2  2019-03-06 07:03:01

 var tableValue = [{ "billdate": "2018-08-04", "SalesType": "Total", "JAYANAGAR": 518212, "MALLESHWARAM": 104801, "KOLAR": 138151 }, { "billdate": "", "SalesType": "cash", "JAYANAGAR": 508161, "MALLESHWARAM": 102675, "KOLAR": 138151 }, { "billdate": "", "SalesType": "creditcard", "JAYANAGAR": 0, "MALLESHWARAM": 0, "KOLAR": 0 }, { "billdate": "", "SalesType": "coupon", "JAYANAGAR": 0, "MALLESHWARAM": 0, "KOLAR": 0 }, { "billdate": "", "SalesType": "paytm", "JAYANAGAR": 0, "MALLESHWARAM": 0, "KOLAR": 0 }, { "billdate": "", "SalesType": "credit", "JAYANAGAR": 0, "MALLESHWARAM": 0, "KOLAR": 0 }, { "billdate": "", "SalesType": "swiggy", "JAYANAGAR": 10051, "MALLESHWARAM": 2126, "KOLAR": 0 }, { "billdate": "", "SalesType": "kb", "JAYANAGAR": 0, "MALLESHWARAM": 0, "KOLAR": 0 }, { "billdate": "", "SalesType": "bigbasket", "JAYANAGAR": 0, "MALLESHWARAM": 0, "KOLAR": 0 }, { "billdate": "", "SalesType": "zomato", "JAYANAGAR": 0, "MALLESHWARAM": 0, "KOLAR": 0 }, { "billdate": "2018-08-05", "SalesType": "Total", "JAYANAGAR": 628358, "MALLESHWARAM": 115223, "KOLAR": 134107 }, { "billdate": "", "SalesType": "cash", "JAYANAGAR": 608336, "MALLESHWARAM": 109013, "KOLAR": 134107 }, { "billdate": "", "SalesType": "creditcard", "JAYANAGAR": 0, "MALLESHWARAM": 0, "KOLAR": 0 }, { "billdate": "", "SalesType": "coupon", "JAYANAGAR": 0, "MALLESHWARAM": 0, "KOLAR": 0 }, { "billdate": "", "SalesType": "paytm", "JAYANAGAR": 0, "MALLESHWARAM": 0, "KOLAR": 0 }, { "billdate": "", "SalesType": "credit", "JAYANAGAR": 0, "MALLESHWARAM": 0, "KOLAR": 0 }, { "billdate": "", "SalesType": "swiggy", "JAYANAGAR": 20022, "MALLESHWARAM": 6210, "KOLAR": 0 }, { "billdate": "", "SalesType": "kb", "JAYANAGAR": 0, "MALLESHWARAM": 0, "KOLAR": 0 }, { "billdate": "", "SalesType": "bigbasket", "JAYANAGAR": 0, "MALLESHWARAM": 0, "KOLAR": 0 }, { "billdate": "", "SalesType": "zomato", "JAYANAGAR": 0, "MALLESHWARAM": 0, "KOLAR": 0 } ] function addTable(tableValue) { var col = Object.keys(tableValue[0]); var countNum = col.filter(i => !isNaN(i)).length; var num = col.splice(0, countNum); col = col.concat(num); var table = document.createElement("table"); var tr = table.insertRow(-1); // TABLE ROW. for (var i = 0; i < col.length; i++) { var th = document.createElement("th"); // TABLE HEADER. th.innerHTML = col[i]; tr.appendChild(th); tr.classList.add("text-center"); } for (var i = 0; i < tableValue.length; i++) { //table body ie tbody tr = table.insertRow(-1); for (var j = 0; j < col.length; j++) { var tabCell = tr.insertCell(-1); var tabledata = tableValue[i][col[j]]; if (tabledata && !isNaN(tabledata)) { tabledata = parseInt(tabledata).toLocaleString('en-in') } if (tableValue[i]['billdate'] != "") { tr.style.backgroundColor = "yellow"; } if (tableValue[i]['billdate'] === tableValue[i][col[j]]) { tabCell.classList.add("headerColor"); } tabCell.innerHTML = tabledata; if (j > 1) tabCell.classList.add("text-right"); } } // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A // CONTAINER. var divContainer = document.getElementById("salesBreakupTable"); divContainer.innerHTML = ""; divContainer.appendChild(table); table.classList.add("table"); table.classList.add("table-striped"); table.classList.add("table-bordered"); table.classList.add("table-hover"); } addTable(tableValue) 
 <style> .headerColor { color:red; } </style> <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"> <div class="container"> <table id="salesBreakupTable"> </table> </div> 

 use just add one condition

if (tableValue[i]['billdate'] != "") { tr.style.backgroundColor = "yellow"; }

解决方案3
 2  2019-03-06 08:18:19

您可以尝试以下代码，也可以使用DataTable js。 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">

<style>
    .headerColor{
        color:red;
    }

    #salesBreakupTable thead, #salesBreakupTable tbody {
        display: block;
    }

    #salesBreakupTable tbody {
        height: 300px;
        overflow: auto;
    }

    #salesBreakupTable tr {
        position: relative;
        width: 100%;
        display: flex;
    }

    #salesBreakupTable tr td, #salesBreakupTable tr th {
        flex: 1;
        width: 200px;
        flex-shrink: 0;
    }
</style>
</head>
<body>


<div class="container">
    <div class="table-responsive">
      <table id="salesBreakupTable">
      </table>

    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    var tableValue = [{
    "billdate": "2018-08-04",
    "SalesType": "Total",
    "JAYANAGAR": 518212,
    "MALLESHWARAM": 104801,
    "KOLAR": 138151
  },
  {
    "billdate": "",
    "SalesType": "cash",
    "JAYANAGAR": 508161,
    "MALLESHWARAM": 102675,
    "KOLAR": 138151
  },
  {
    "billdate": "",
    "SalesType": "creditcard",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "coupon",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "paytm",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "credit",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "swiggy",
    "JAYANAGAR": 10051,
    "MALLESHWARAM": 2126,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "kb",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "bigbasket",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "zomato",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "2018-08-05",
    "SalesType": "Total",
    "JAYANAGAR": 628358,
    "MALLESHWARAM": 115223,
    "KOLAR": 134107
  },
  {
    "billdate": "",
    "SalesType": "cash",
    "JAYANAGAR": 608336,
    "MALLESHWARAM": 109013,
    "KOLAR": 134107
  },
  {
    "billdate": "",
    "SalesType": "creditcard",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "coupon",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "paytm",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "credit",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "swiggy",
    "JAYANAGAR": 20022,
    "MALLESHWARAM": 6210,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "kb",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "bigbasket",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "zomato",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  }

];


function addTable(data) {
    var tableHeader = "<thead><tr>";
    var tableBody = "<tbody>";
    $.each(data,function(i,v){
        if (v['billdate']) {
            tableBody += "<tr class='headerColor'>";
        }else {
            tableBody += "<tr>";
        }
        $.each(v,function(d,a){
            if (i == 0) {
                tableHeader += "<th>"+d+"</th>";
            }
            tableBody += "<td>"+a+"</td>";
        });
        tableBody += "</tr>";
    });
    tableHeader += "</tr></thead>";
    tableBody += "</tbody>";
    $("#salesBreakupTable").addClass("table table-striped table-bordered table-hover").html(tableHeader+tableBody);
}

addTable(tableValue);
</script>
</body>
</html>

解决方案4
 2  2019-03-13 09:34:50

想法是将表放在div中，同时设置div上隐藏的溢出和表体的溢出自动。 这可以用纯css和html完成。 看看这个修复程序。

解决方案5
 0  2019-03-06 06:43:21

使用DataTable js代替这一点，因此DataTable js提供了更多的表功能

这里是DataTable颜色添加示例 

$('#example').dataTable( {
    "createdRow": function( row, data, dataIndex){
        if(data[2] ==  `someVal`){
            $(row).addClass('redClass');
        }
    }
});

示例网址： 点击此处 DataTable参与点击此处

解决方案6
 0  

尝试替换此if块： 

  if (tableValue[i]['billdate'] === tableValue[i][col[j]]) {

    tabCell.classList.add("headerColor"); // here i am checking if tableValue===billdate then giving it a class to do some css to it

  }

用： 

  if ((tableValue[i]['billdate'] === tableValue[i][col[j]]) && (tableValue[i][col[j]]).length != 0 ) { // added empty cell filter so empty cells will not get the headerColor class

    tabCell.classList.add("headerColor"); // here i am checking if tableValue===billdate then giving it a class to do some css to it

  }

然后应用这种风格： 

  .headerColor,.headerColor ~ td
  {
    background-color:red;
    color: white;
  }
  table#salesBreakupTable thead, table#salesBreakupTable tbody { display: block; }
  table#salesBreakupTable tbody {
    height: 280px; /* Just for the demo */
    overflow-y: auto; /* Trigger vertical scroll */
    overflow-x: hidden; /* Hide the horizontal scroll */
  }

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使HTML表格的正文滚动？ 如何垂直调整HTML表格的正文大小 在 React 中，如何使 html 表格的 tbody 可滚动？ 如何独立于“thead”滚动表格的“tbody”？ 滚动表格以将其应用于 tbody 没有td内容的html表tbody滚动分为多行 在 html 表的 tbody 中设置滚动时出现问题 - 对齐被破坏 具有垂直固定标题的XY滚动HTML表 为表“ tbody”生成水平滚动 允许在tbody中水平和垂直滚动表
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM