1

我想制作一个大约 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>

我可以通过编写代码一百次来做到这一点..但我认为应该有一些更实用的方法来通过 css 来做到这一点..任何人都可以帮助......

4

5 回答 5

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>
于 2012-12-14T09:49:22.587 回答
0

作为其他有效答案的替代方案，您可以尝试这样的事情。

我所做的是<div>使用 javascript 创建 2500 s，然后在 500px 容器中为它们提供 1% 的填充。500 的 1% 是 5，所以这给了我们 10px x 10px 的正方形。将它们全部漂浮在容器中，它们很好地对齐到这个 50x50 的网格中。

关键代码是：

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

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

于 2012-12-14T10:12:41.153 回答
0

This is all you need:

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

However, using a table you can't be sure the width will be always 10px for each cell, because if the window's width is less than the table width, the cells will shrink by default.

于 2012-12-14T09:31:48.893 回答
0

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

于 2012-12-14T10:25:45.097 回答
0 
   <!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>

试一试

于 2012-12-14T10:06:23.157 回答