表不超過窗口寬度

我有一個動態表創建像這樣：表不超過窗口寬度

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。是否有人知道如何讓我的表具有「固定」大小（取決於單元數），如果它超過窗口寬度，它將滾動？

來源

2014-01-28 Sterling Archer

我不知道我是否理解，但嘗試把表格放在div寬度'overflow：scroll;' – Fernando

@Fernando我試過了，沒有用。 –

你設置了寬度嗎？ – Fernando

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

由於您希望您的單元格爲100px100px您只需將TABLE高度和寬度設置爲100次divs（單元數）。

來源

2014-01-28 20:00:03 ElliotM

驚人的輝煌，謝謝！ –

將表格包裝成<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";

來源

2014-01-28 19:55:11 Kroltan

我之前嘗試過，它沒有工作。 –

這要求表格具有設定的寬度。 – Kroltan

它沒有發生在你身上，可能很重要？大聲笑 –

表不超過窗口寬度

回答

相關問題