我有一个HTML表，仅尝试使用CSS或JS对其进行第一列修复，我已经使用JavaScript修复了表的标题，但是在修复表的第一列时遇到了问题
我用来修复thead的JS代码
document.getElementById("commonDvScroll").addEventListener("scroll",function(){
var translate = "translate(0,"+this.scrollTop+"px)";
this.querySelector("thead").style.transform = translate;
});
我用Google搜索了很多这个问题，但是没有找到任何答案，我使用了其中的一些问题，但是它们创建了一些问题，例如表布局更改了标题和列边框的不匹配。
我的代码
var data = [{
"billdate": "2018-09-01",
"outlet": "Site1",
"gross": 451458,
"discount": 513,
"GST": 25357,
"amount": 476426
},
{
"billdate": "2018-09-01",
"outlet": "Site3",
"gross": 87190,
"discount": 0,
"GST": 4930,
"amount": 92141
},
{
"billdate": "2018-09-01",
"outlet": "Site2",
"gross": 109308,
"discount": 0,
"GST": 5966,
"amount": 115313
},
{
"billdate": "2018-09-02",
"outlet": "Site1",
"gross": 483194,
"discount": 471,
"GST": 28319,
"amount": 511153
},
{
"billdate": "2018-09-02",
"outlet": "Site3",
"gross": 109483,
"discount": 0,
"GST": 6198,
"amount": 115704
},
{
"billdate": "2018-09-02",
"outlet": "Site2",
"gross": 79305,
"discount": 0,
"GST": 4254,
"amount": 83597
},
{
"billdate": "2018-09-03",
"outlet": "Site1",
"gross": 157660,
"discount": 263,
"GST": 9944,
"amount": 167421
},
{
"billdate": "2018-09-03",
"outlet": "Site2",
"gross": 51059,
"discount": 0,
"GST": 2693,
"amount": 53775
}
]
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 = "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");
}
let formatedData = formatData(data);
renderTable(formatedData);
$(".checkbox-menu").on("change", "input[type='checkbox']", function() { // this one to select multiple options as check box
$("#save").show();
$(this).closest("li").toggleClass("active", this.checked);
var sList = "";
$('input[type=checkbox]').each(function() {
if (this.checked) {
sList += $(this).val() + ","
}
});
$("#To").val(sList.slice(0, -1));
});
$(document).on('click', '.allow-focus', function(e) {
e.stopPropagation();
});
$("#save").on("click", function() {
var classes = $("#To").val().replace(/\s+/g, "").split(",");
$(".table thead tr:not(:first) th:not(:first-child)").hide();
$(".table tbody tr td:not(:first-child)").hide();
$(".table thead tr:first th:not(:first)").attr("colspan", classes.length);
for (i = 0; i < classes.length; i++) {
var classToShow = classes[i].substr(0, 3).toLowerCase() + classes[i].substr(3);
$("." + classToShow).each(function() {
var index = $(this).index();
$(".table thead tr:not(:first)").each(function() {
$(this).find("th").eq(index).show();
});
$(".table tbody tr").each(function() {
$(this).find("td").eq(index).show();
});
});
}
});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="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<div class="form-group col-xs-12 col-sm-12 col-md-8 col-lg-8">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button" name="To" id="To" readonly>
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<ul class="dropdown-menu checkbox-menu allow-focus" aria-labelledby="dropdownMenu1">
<li><label> <input type="checkbox"
value="Gross Amount"> Gross Amount
</label></li>
<li><label> <input type="checkbox"
value="Discount"> Discount
</label></li>
<li><label> <input type="checkbox"
value="GST"> GST
</label></li>
<li><label> <input type="checkbox"
value="Net Amount"> Net Amount
</label></li>
</ul>
</div>
<button type="button" class="commonButton" id="save">
<i class="fa fa-search"></i> Go
</button>
</div>
</div>
<div id="dailySales" class="table table-responsive"></div>
注意-：出于某些原因，我无法使用数据表，我仅使用JavaScript，jquery和CSS
我只是想用CSS做到这一点
答案 0 :(得分：1)
假设第一列的宽度和高度是固定值，请尝试以下更新的代码段
var data = [{
"billdate": "2018-09-01",
"outlet": "Site1",
"gross": 451458,
"discount": 513,
"GST": 25357,
"amount": 476426
},
{
"billdate": "2018-09-01",
"outlet": "Site3",
"gross": 87190,
"discount": 0,
"GST": 4930,
"amount": 92141
},
{
"billdate": "2018-09-01",
"outlet": "Site2",
"gross": 109308,
"discount": 0,
"GST": 5966,
"amount": 115313
},
{
"billdate": "2018-09-02",
"outlet": "Site1",
"gross": 483194,
"discount": 471,
"GST": 28319,
"amount": 511153
},
{
"billdate": "2018-09-02",
"outlet": "Site3",
"gross": 109483,
"discount": 0,
"GST": 6198,
"amount": 115704
},
{
"billdate": "2018-09-02",
"outlet": "Site2",
"gross": 79305,
"discount": 0,
"GST": 4254,
"amount": 83597
},
{
"billdate": "2018-09-03",
"outlet": "Site1",
"gross": 157660,
"discount": 263,
"GST": 9944,
"amount": 167421
},
{
"billdate": "2018-09-03",
"outlet": "Site2",
"gross": 51059,
"discount": 0,
"GST": 2693,
"amount": 53775
}
]
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 = "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");
}
let formatedData = formatData(data);
renderTable(formatedData);
$(".checkbox-menu").on("change", "input[type='checkbox']", function() { // this one to select multiple options as check box
$("#save").show();
$(this).closest("li").toggleClass("active", this.checked);
var sList = "";
$('input[type=checkbox]').each(function() {
if (this.checked) {
sList += $(this).val() + ","
}
});
$("#To").val(sList.slice(0, -1));
});
$(document).on('click', '.allow-focus', function(e) {
e.stopPropagation();
});
$("#save").on("click", function() {
var classes = $("#To").val().replace(/\s+/g, "").split(",");
$(".table thead tr:not(:first) th:not(:first-child)").hide();
$(".table tbody tr td:not(:first-child)").hide();
$(".table thead tr:first th:not(:first)").attr("colspan", classes.length);
for (i = 0; i < classes.length; i++) {
var classToShow = classes[i].substr(0, 3).toLowerCase() + classes[i].substr(3);
$("." + classToShow).each(function() {
var index = $(this).index();
$(".table thead tr:not(:first)").each(function() {
$(this).find("th").eq(index).show();
});
$(".table tbody tr").each(function() {
$(this).find("td").eq(index).show();
});
});
}
});table.table-bordered>thead>tr>th {
border: 1px solid rgba(29, 150, 178, 1);
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 9pt;
padding: 5px 5px 5px 5px;
background-color: #E6BBE2;
font-weight: normal;
text-align: center;
color: black;
}
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: #C39898;
padding: 5px 5px 5px 5px;
color: black;
}
table{
margin-left : 75px;
}
table tr>th:first-child{
position:absolute;
width:75px;
left:0;
height:30px;
}
table tr>td:first-child{
position:absolute;
width:75px;
left: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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<div class="form-group col-xs-12 col-sm-12 col-md-8 col-lg-8">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button" name="To" id="To" readonly>
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<ul class="dropdown-menu checkbox-menu allow-focus" aria-labelledby="dropdownMenu1">
<li><label> <input type="checkbox"
value="Gross Amount"> Gross Amount
</label></li>
<li><label> <input type="checkbox"
value="Discount"> Discount
</label></li>
<li><label> <input type="checkbox"
value="GST"> GST
</label></li>
<li><label> <input type="checkbox"
value="Net Amount"> Net Amount
</label></li>
</ul>
</div>
<button type="button" class="commonButton" id="save">
<i class="fa fa-search"></i> Go
</button>
</div>
</div>
<div id="dailySales" class="table table-responsive"></div>