Javascript 如何以编程方式创建20x20px单元网格背景？

我正在尝试构建一个浏览器窗口大小的网格，它有20x20px的正方形。我的第一个想法是用下面的代码构造一个表，但是IE8（在任何模式下）都不会呈现单元格，除非它们有非空白内容。根据，如果它有一个

，它就会工作，但根据我的测试，它只在表位于原始DOM中时工作，而不是来自javascript

dojo.ready(function(){
    var grid = dojo.byId("grid");
    var tr;
    for(var i=0; i<20; i++) {
        tr = dojo.create("tr", null, grid);
        for(var j=0; j<20; j++) {
            var td =dojo.create("td", {innerHTML: "&nbsp;"}, tr);
            dojo.style(td, {border: "solid", height: "20px", width: "20px"});
        }
    }
});
...
<table id="grid" style="border-collapse: collapse;"></table>

ready（function（））{
var grid=dojo.byId（“grid”）；
var-tr；
对于（var i=0；i它是否必须以编程方式进行？因为使用20x20像素的GIF作为背景图像，在右侧和底部有一条线，只需五分钟即可完成。它是跨浏览器的，也适用于大面积区域

编辑：你在问题的最后已经有了这个想法。是的，我认为这是最简单的方法。
有时候我做事情很难

body{background image:url（grid cell.png）；background repeat:repeat；}

^^
我不确定在动态创建表时dojo库是否修复了IE在表中的特定问题，但如果没有，则需要在添加行之前添加TBODY标记，否则IE将无法正确呈现表


var graphics = goog.graphics.createGraphics(800, 800);
var path, stroke = new goog.graphics.Stroke(1, "gray");

for(var x=0; x<65; x++) {
 for(var y=0; y<65; y++) {
     path = new goog.graphics.Path();
     path.moveTo(0, y*20);
     path.lineTo(800, y*20);
     graphics.drawPath(path, stroke);

     path = new goog.graphics.Path();
     path.moveTo(x*20, 0);
     path.lineTo(x*20, 800);
     graphics.drawPath(path, stroke);
 }
}

graphics.render(document.byId("grid"));
...