How to create a table with first column fixed using HTML/CSS? - html

Question

I want to create a table which can be scrolled horizontally. The number of columns is dynamic. I want to achieve when we scroll the table horizontally the first column needs to be fixed/frozen. I have tried the following css. The first column is fixed alright but, second, third columns are hidden under the fixed column.
.mydiv {
overflow-y: scroll;
}.headcol {
position:absolute;
width: 100px;
text-align:center;
background-color: #4CAF50;
color: white;
font-family:arial;
font-size:13px;
padding-left:15px;
padding-right:15px;
padding-top:10px;
padding-bottom:10px;
border: 1px solid #c4c0c0;
}
.tablemy {
border-collapse: collapse;
border: 1px solid #c4c0c0;
}
.thmy {
text-align:center;
background-color: #4CAF50;
color: white;
font-family:arial;
font-size:13px;
padding-left:15px;
padding-right:15px;
padding-top:10px;
padding-bottom:10px;
border: 1px solid #c4c0c0;
}
.tdmy {
white-space: nowrap;
padding:8px; border-left:1px solid #ccc; border-top:1px solid #ccc;
padding-left:15px;
padding-right:15px;
padding-top:10px;
padding-bottom:10px;
font-size:12px;
font-family:arial;
border: 1px solid #c4c0c0;
color:#585858;
}
.trmy:nth-child(odd) {
background-color:#F5F5F5;
}
tr:nth-child(even) {
background-color:#ffffff;
}
And my table is
I'm creating my table in javascript.
$(window).load(function(){
var customers = new Array();
customers.push(["TN04 AH 0253", "55"]);
customers.push(["TN04 AF 8830", "67"]);
customers.push(["TN37 CM 1249", "33"]);
customers.push(["TN19 F 9175", "47"]);
customers.push(["TN37CM 1932", "0"]);
var date = new Date();
var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
var dateArray = getDates(firstDay, lastDay);
// Create a HTML Table element.
var table = document.createElement("TABLE");
table.setAttribute('class', 'tablemy');
table.border = "1";
// Get the count of columns.
var columnCount = customers[0].length;
var row = table.insertRow(-1);
for (var i = 0; i < dateArray.length; i++) {
var headerCell = document.createElement("TH");
if (i === 0) {
headerCell.setAttribute('class', 'headcol');
} else {
headerCell.setAttribute('class', 'thmy');
}
//headerCell.setAttribute('class', 'thmy');
headerCell.innerHTML = dateArray[i];
row.appendChild(headerCell);
}
// Add the data rows.
for (var i = 0; i < customers.length; i++) {
row = table.insertRow(-1);
row.setAttribute('class', 'trmy');
for (var j = 0; j < columnCount; j++) {
var cell = row.insertCell(-1);
if (j === 0) {
cell.setAttribute('class', 'headcol');
} else {
cell.setAttribute('class', 'tdmy');
}
//cell.setAttribute('class', 'tdmy');
cell.innerHTML = customers[i][j];
}
}
var dvTable = document.getElementById("dvTable");
dvTable.innerHTML = "";
dvTable.appendChild(table);
})
function getDates(date1, date2) {
var day = 1000 * 60 * 60 * 24;
var diff = (date2.getTime() - date1.getTime())/day;
var dateArray = new Array();
dateArray.push("Unit/Count");
for(var i=0; i<=diff; i++)
{
var xx = date1.getTime() + day * i;
var yy = new Date(xx);
var strDate = yy.getDate() + "/" + (yy.getMonth() + 1);
dateArray.push(strDate);
}
return dateArray;
}

Answer 1

I think you need to set position: fixed for 1st column and to make all other columns visible you need to set padding-left: 130px; (which is equal to width of first column) for .tablemy :
function getDates(date1, date2) {
var day = 1000 * 60 * 60 * 24;
var diff = (date2.getTime() - date1.getTime())/day;
var dateArray = new Array();
dateArray.push("Unit/Count");
for(var i=0; i<=diff; i++)
{
var xx = date1.getTime() + day * i;
var yy = new Date(xx);
var strDate = yy.getDate() + "/" + (yy.getMonth() + 1);
dateArray.push(strDate);
}
return dateArray;
}
var customers = new Array();
customers.push(["TN04 AH 0253", "55"]);
customers.push(["TN04 AF 8830", "67"]);
customers.push(["TN37 CM 1249", "33"]);
customers.push(["TN19 F 9175", "47"]);
customers.push(["TN37CM 1932", "0"]);
var date = new Date();
var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
var dateArray = getDates(firstDay, lastDay);
// Create a HTML Table element.
var table = document.createElement("TABLE");
table.setAttribute('class', 'tablemy');
table.border = "1";
// Get the count of columns.
var columnCount = customers[0].length;
var row = table.insertRow(-1);
for (var i = 0; i < dateArray.length; i++) {
var headerCell = document.createElement("TH");
if (i === 0) {
headerCell.setAttribute('class', 'headcol');
} else {
headerCell.setAttribute('class', 'thmy');
}
//headerCell.setAttribute('class', 'thmy');
headerCell.innerHTML = dateArray[i];
row.appendChild(headerCell);
}
// Add the data rows.
for (var i = 0; i < customers.length; i++) {
row = table.insertRow(-1);
row.setAttribute('class', 'trmy');
for (var j = 0; j < columnCount; j++) {
var cell = row.insertCell(-1);
if (j === 0) {
cell.setAttribute('class', 'headcol');
} else {
cell.setAttribute('class', 'tdmy');
}
//cell.setAttribute('class', 'tdmy');
cell.innerHTML = customers[i][j];
}
}
var dvTable = document.getElementById("dvTable");
dvTable.innerHTML = "";
dvTable.appendChild(table);
html, body {
margin: 0;
padding: 0;
}
.mydiv {
overflow-y: scroll;
}
.headcol {
position: fixed;
left: 0;
width: 100px;
text-align:center;
background-color: #4CAF50;
color: white;
font-family:arial;
font-size:13px;
padding-left:15px;
padding-right:15px;
padding-top:10px;
padding-bottom:10px;
border: 1px solid #c4c0c0;
}
.tablemy {
border-collapse: collapse;
border: 1px solid #c4c0c0;
margin-left: 130px;
}
.thmy {
text-align:center;
background-color: #4CAF50;
color: white;
font-family:arial;
font-size:13px;
padding-left:15px;
padding-right:15px;
padding-top:10px;
padding-bottom:10px;
border: 1px solid #c4c0c0;
}
.tdmy {
white-space: nowrap;
padding:8px; border-left:1px solid #ccc; border-top:1px solid #ccc;
padding-left:15px;
padding-right:15px;
padding-top:10px;
padding-bottom:10px;
font-size:12px;
font-family:arial;
border: 1px solid #c4c0c0;
color:#585858;
}
.trmy:nth-child(odd) {
background-color:#F5F5F5;
}
tr:nth-child(even) {
background-color:#ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="dvTable"></table>