Question

我想制作一个大约50列和50行的网格，每个单元格的高度和宽度为10px。

<!DOCTYPE html>
<html>
<head>
<style>
table
 {
   border-collapse:collapse;
 }
table,th, td
 {
   border: 1px solid black;
 }
td{width:10px;}
tr{height:10px;}
</style>
</head>
<body>

  <table border="1">
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>

</body>
</html>

我可以通过编写代码一百次来做到这一点。但我认为应该有一些更实用的方法来做到这一点。谁能帮忙......

Answer 1

我不确定你是否可以在css中这样做，但你肯定能用javascript做到这一点：

<style>
    td {
        width: 10px;
        border: 1px solid black;
    }

    tr {
        height: 10px;
    }
</style>

<script>
    function makeCells() {
        var t = document.createElement("TABLE");

        for (var rows = 0; rows < 50; rows++) {
            var newRow = document.createElement("TR");
            console.log(newRow);
            t.appendChild(newRow);
            for (var cols = 0; cols < 50; cols++) {
                var newCell = document.createElement("TD");
                newRow.appendChild(newCell);
            }
        }

        document.body.appendChild(t);
    }

    makeCells();
</script>

Answer 2

这就是你所需要的：

td {
  width:10px;
  height:10px;
}

但是，使用表格时，您无法确定每个单元格的宽度始终为10px，因为如果窗口的宽度小于表格宽度，则默认情况下单元格将缩小。

Answer 3

   <!DOCTYPE html>
   <html>
   <head>
   <style>
       table{ border-collapse:collapse; }
       table,th, td{ border: 1px solid black; }
       td{width:10px;}
       tr{height:10px;}
   </style>
   </head>
   <body>
   <table border="1">
   <?php for($ctr=0; $ctr<=50; $ctr++){ ?>
   <tr>
       <?php for($ctr2=0; $ctr2<=50; $ctr2++){ ?>
       <td></td>
       <?php }?>
   </tr>
   <?php }?>
   </table>
   </body>
   </html>

试一试

Answer 4

作为另一个工作答案的替代方案，您可以尝试类似this.

的内容

我用javascript创建了2500 <div> s，然后在500px容器中给它们填充了1％的填充。 500％的1％是5，所以这给我们10px乘10px的平方。将它们全部留在容器中，它们很好地对准这个50x50网格。

关键代码是：

div {
    padding: 1%;
    background: #aaa;
    float: left;
}

我添加了备用背景颜色，以帮助向您展示其中的内容。如果你向div添加内容，这将不会很好地播放，但如果它们只是10px宽，你似乎不想这样做。

Answer 5

无论如何你需要50×50个元素，你不能在CSS或HTML中循环创建元素（它们没有循环，因为它们不是编程语言）。在服务器端或客户端编程语言中有许多不同的方法来生成元素，但首先需要决定使用哪种技术，然后使用所选语言的基本结构。

CSS大方格 - 如何生成表格

5 个答案: