javascript - 表格不超过窗口宽度

Question

我有一个这样创建的动态表:

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);

并使用这种样式:

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

表格只能适应我的屏幕宽度(参见此处:zombie map)

但是如果我将窗口越拖越宽，它最终会适合它的 CSS 大小。这不是我需要的，我希望它会滚动而不是缩小 td 宽度。有谁知道如何让我的表格有一个“固定”大小(取决于单元格数)，如果它超过窗口宽度就会滚动？

Answer 1

Fiddle

要根据单元格计数设置表格大小，您可以执行以下操作

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);

由于您希望单元格为 100px 乘以 100px，您只需将 TABLE 高度和宽度设置为 divs 的 100 倍(单元格数量).