CODEWITHSUNDEEP
javascripthtmlcss
Sterling Archer
Sterling Archer

Reputation: 22395

Table Not Exceeding Window Width

I have a dynamic table created like so:

function genDivs(divs){ 
    var root = document.createElement("table");
    for(var x = 0; x < divs; x++){ 
        var row = document.createElement("tr");
        for(var y = 0; y <= divs; y++){ 
            var cell = document.createElement("td"); 
            cell.textContent = x+","+y;
            row.appendChild(cell); 
        } 
        root.appendChild(row); 
    }
    var main = document.getElementById("container");
    document.body.appendChild(root);
}
genDivs(32);

And using this styling:

<style>
    table {
        border-collapse: collapse;
    }
    td {
        width:100px;
        height:100px;
        border:1px solid black;
    }
</style>

The table only fits as wide as my screen will go (see here: zombie map)

But if I drag the window wider and wider, it eventually fits into its' CSS size. This is not what I need, I was hoping it would scroll instead of shrink the td width. Does anybody know how to have my table have a "fixed" size (depending on the cell count) that will scroll if it exceeds the window width?

Upvotes: 0

Views: 224

Answers (2)

Kroltan
Kroltan

Reputation: 5156

Wrapping the table into a <div> and set it's overflow CSS property to auto would be the most obvious choice. For that you would also need to set the table's height in your code.

CSS changes:

div.table-container {
    overflow: auto;
}

HTML changes:

<body>
    <div class="table-container" id="my-table-container"></div>
</body>

JS changes:

From:

var root = document.createElement("table");

To:

var root = document.getElementById("my-table-container").createElement("table");

And add this line to set the table's height:

root.style.width = divs*divs+"px";

Upvotes: 0

em_
em_

Reputation: 2259

Fiddle

To set the table size based off of the cell count, you could do the following

function genDivs(divs){ 
var root = document.createElement("table");
for(var x = 0; x < divs; x++){ 
    var row = document.createElement("tr");
    for(var y = 0; y <= divs; y++){ 
        var cell = document.createElement("td"); 
        cell.textContent = x+","+y;
        row.appendChild(cell); 
    } 
    root.appendChild(row); 
}
    root.style.width=String(divs*100)+"px";
    root.style.height=String(divs*100)+"px";
    var main = document.getElementById("container");
    document.body.appendChild(root);
}
genDivs(32);

Since you want your cells to be 100px by 100px you just set your TABLE height and width to 100 times divs (number of cells).

Upvotes: 2

Related Questions