Javascript 不超过窗宽的桌子_Javascript_Html_Css

Javascript 不超过窗宽的桌子

javascript html css

Javascript 不超过窗宽的桌子,javascript,html,css,Javascript,Html,Css,我创建了一个动态表，如下所示： 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 = documen

我创建了一个动态表，如下所示：

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

函数genDivs（divs）{
var root=document.createElement（“表”）；
对于（var x=0；x对于（var y=0；y而言，将表格包装成
并将其溢出
CSS属性设置为自动
将是最明显的选择。为此，您还需要在代码中设置表格的高度
CSS更改：
div.table-container {
    overflow: auto;
}

HTML更改：
<body>
    <div class="table-container" id="my-table-container"></div>
</body>

致：
并添加此行以设置桌子的高度：
root.style.width = divs*divs+"px";


要根据单元格计数设置表大小，可以执行以下操作
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);

函数genDivs（divs）{
var root=document.createElement（“表”）；
对于（var x=0；x对于（var y=0；y），我不确定是否理解，但尝试将表放入div widthoverflow:scroll；@Fernando我尝试过，但没有成功。是否设置了宽度？这要求表具有设置的宽度。
var root = document.getElementById("my-table-container").createElement("table");

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

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