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倍。

Answer 2

将表格包装到<div>并将其overflow CSS属性设置为auto将是最明显的选择。为此，您还需要在代码中设置表格的高度。

CSS更改：

div.table-container {
    overflow: auto;
}

HTML更改：

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

JS改变：

自：

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

要：

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

并添加此行以设置表格的高度：

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

表不超过窗口宽度

2 个答案: