表格不超过窗口宽度答案

【问题标题】：Table Not Exceeding Window Width表格不超过窗口宽度
【发布时间】：2014-01-28 19:48:12
【问题描述】：

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

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 宽度。有谁知道如何让我的表格有一个“固定”大小（取决于单元格数），如果超过窗口宽度会滚动？

【问题讨论】：

我不确定我是否理解，但尝试将表格放在 div 宽度内overflow: scroll;
@Fernando 我试过了，没用。
你设置宽度了吗？

标签： javascript html css

【解决方案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 倍（单元格数）。

【讨论】：

【解决方案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";

【讨论】：

这要求表格有一个设定的宽度。