The code snippet here dynamically generates a table, but it seems to have some inconsistencies across different browsers. I am currently struggling with setting the row heights dynamically, and on top of that issue, I noticed that the table layout varies depending on the browser being used. Surprisingly, it works perfectly fine on Firefox and IE, but fails to display properly in Chrome. In Chrome, the first row occupies most of the table's height, leaving very little space for the subsequent rows.
Just as a heads up, this particular code snippet creates only 3 rows. However, in future iterations, it will wipe out the existing content and generate 5 rows with unique content (the deletion and recreation functionality is not implemented here, but it has been successfully implemented in another piece of code). At this point, I find myself stuck trying to solve the mystery of row heights...
CreateRow(0);
CreateRow(1);
CreateRow(2);
function CreateRow(iRow){
var Html_Content = document.getElementById("id_MainTable").innerHTML ;
Html_Content += StandardRow(iRow);
document.getElementById("id_MainTable").innerHTML = Html_Content;
}
function StandardRow(iRow){
var iColumn, Html_Content = "";
for (iColumn = 0; iColumn < 10; iColumn++){
Html_Content += "<td id='Row" + iRow + "Col" + iColumn + "'>-</td>";
}
Html_Content += "</row></table>";
return Html_Content;
} html, body{
height:100%;
width:100%;
margin: 0px;
padding: 0px;
}
table{
height:100%;
width:100%;
}
table tr{
height:33%;
}
table td{
width: 10%;
font-size: 5vmin;
text-align: center;
border: solid 1px;
} <table id = "id_MainTable"></table>