HTML table style specific Column

Question

I have an HTML table Which is dynamic one i am using data-tables to achieve some good functionality tables,Here i am using data-tables to fix headers and columns of my my table and all of that working fine

In my table i Have a column named as Total i am changing that full row color, but that's not showing up good

• My table has coll-span also so when i am styling nth-child(3) so it is styling main column which is at third no.

I am doing like this

#dailySales tr th:nth-child(1), 
#dailySales tr td:nth-child(1) 
{
    font-size:25px;
    color:blue;
}       

but this is not working

 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 = [{ "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": 109029, "discount": 0, "GST": 6062, "amount": 115113 }, { "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": 267398, "discount": 268, "GST": 15898, "amount": 283124 }, { "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]; //calculating totals for Total column 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"); th.classList.add("discount"); headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "GST"; th.classList.add("text-center"); th.classList.add("gst"); headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "Net_Amount"; th.classList.add("text-center"); th.classList.add("netAmount"); //adding class to column Net Amount headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "Gross_Amount"; th.classList.add("text-center"); th.classList.add("grossAmount"); //adding class to column Gross Amount 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 = "Net Total"; td.classList.add("text-center"); headerRow.appendChild(td); outlets.forEach(element => { // these are the table rows for each column 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); }); 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"); $(table).DataTable({ "scrollX": true, "scrollY": "100px", "paging": false, "info": false, "ordering": false, "searching": false, fixedColumns: { leftColumns: 5 } }); } let formatedData = formatData(data); renderTable(formatedData); 

 #dailySales tr th:nth-child(2), #dailySales tr td:nth-child(2), #dailySales tr th:nth-child(3), #dailySales tr td:nth-child(3), #dailySales tr th:nth-child(4), #dailySales tr td:nth-child(4), #dailySales tr th:nth-child(5), #dailySales tr td:nth-child(5) { color: blue; } 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; color: black; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <link rel="stylesheet" href="//cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css"> <link rel="stylesheet" href="//cdn.datatables.net/fixedcolumns/3.2.5/css/fixedColumns.bootstrap4.min.css"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script> <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script src="//cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script> <table id="dailySales" class="table table-responsive"></table> 

Answer 1

 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 = [{ "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": 109029, "discount": 0, "GST": 6062, "amount": 115113 }, { "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": 267398, "discount": 268, "GST": 15898, "amount": 283124 }, { "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]; //calculating totals for Total column 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"); th.classList.add("discount"); headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "GST"; th.classList.add("text-center"); th.classList.add("gst"); headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "Net_Amount"; th.classList.add("text-center"); th.classList.add("netAmount"); //adding class to column Net Amount headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "Gross_Amount"; th.classList.add("text-center"); th.classList.add("grossAmount"); //adding class to column Gross Amount 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 = "Net Total"; td.classList.add("text-center"); headerRow.appendChild(td); outlets.forEach(element => { // these are the table rows for each column 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); }); 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"); $(table).DataTable({ "scrollX": true, "scrollY": "100px", "paging": false, "info": false, "ordering": false, "searching": false, fixedColumns: { leftColumns: 5 } }); } let formatedData = formatData(data); renderTable(formatedData); 

 #dailySales tr th:nth-child(2), #dailySales tr td:nth-child(2), #dailySales tr th:nth-child(3).sorting_disabled, #dailySales tr th:nth-child(3).discount, #dailySales tr td:nth-child(3), #dailySales tr th:nth-child(4).sorting_disabled, #dailySales tr th:nth-child(4).gst, #dailySales tr td:nth-child(4), #dailySales tr th:nth-child(5).sorting_disabled, #dailySales tr th:nth-child(5).netAmount, #dailySales tr td:nth-child(5) { color: blue; } 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; color: black; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <link rel="stylesheet" href="//cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css"> <link rel="stylesheet" href="//cdn.datatables.net/fixedcolumns/3.2.5/css/fixedColumns.bootstrap4.min.css"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script> <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script src="//cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script> <table id="dailySales" class="table table-responsive"></table> 

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;
  color: black;
}

Answer 2

if I understand good you want to put the only total with blue color

#dailySales tr th:nth-child(2)
{
  color: blue;
}

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;
  color: black;
}

Answer 3

#dailySales tr th:nth-child(2),
#dailySales tr td:nth-child(2),
#dailySales tr th:nth-child(3).sorting_disabled,
#dailySales tr th:nth-child(3).discount,
#dailySales tr td:nth-child(3),
#dailySales tr th:nth-child(4).sorting_disabled,
#dailySales tr th:nth-child(4).gst,
#dailySales tr td:nth-child(4),
#dailySales tr th:nth-child(5).sorting_disabled,
#dailySales tr th:nth-child(5).netAmount,
#dailySales tr td:nth-child(5) {
  color: blue;
}