1

Need some help.. I need to implement an dynamic HTML table. I need to insert given number of cells to equal number of cols with many rows. I want each row width will be as same as viewport width, so the number of cells each row will be blocked by viewport width. I also want that when every row reach the limited width(as viewport) I will set a new row and keep adding cells.

My JS so far:

function createTable(numOfCubes){
var table = document.getElementById("myTable");
var row = document.createElement("tr");

for(var i=0; i < numOfCubes; i++){
    
    var redCube = document.createElement("td");
    redCube.className = "redCube";
    redCube.setAttribute("onclick","showPosition(this)")
    table.append(row);
    row.append(redCube);
    }

Hope someone may help me, I searched whole internet and didnt found a solution. Thanks

Tomer Haliva
  • 21
  • 2
  • You should add some more context: Where are you going to create that table? server side (PHP, ASP, NodeJS...)? Cliente Side (JS)? – Roimer Jan 09 '21 at 12:57
  • Also, what size the table would be if the number is 48? 4 rows and 12 cols? 12 rows and 4 cols? 3 rows and 16 cols?. It is also a good idea to at least try some code and show us that you have tried – Roimer Jan 09 '21 at 13:04
  • I have solved it for you, just two second after the question is closed. https://github.com/Weilory/temp/blob/main/table.html – Weilory Jan 09 '21 at 13:25
  • If you would like explanation, please reply to this comment. In addition, asking a good question with **what you have tried**, **what the expected result is** is extremely important, please have a read at https://stackoverflow.com/help/how-to-ask . Welcome to SO. – Weilory Jan 09 '21 at 13:26
  • @tomer-haliva I think the best approach is using css grid. check this question: https://stackoverflow.com/questions/43115822/can-i-make-a-css-grid-with-dynamic-number-of-rows-or-columns – Homa Jan 09 '21 at 13:31

0 Answers0