1

各セルの高さと幅が 10px の約 50 列と 50 行のグリッドを作成したいと考えています。

<!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>

コードを100回書くことでこれを行うことができます..しかし、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秒作成し、500pxコンテナに1％のパディングを与えることです。500の1％は5なので、10pxx10pxの正方形になります。それらをすべてコンテナに残してフロートさせると、この50x50グリッドにうまく整列します。

キーコードは次のとおりです。

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

そこに何があるかを示すために、別の背景色を追加しました。divにコンテンツを追加すると、これはうまく機能しませんが、幅が10ピクセルしかない場合は、とにかくそれを実行したくないようです。

于 2012-12-14T10:12:41.153 に答える
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 に答える
0

必要なのはこれだけです:

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

ただし、テーブルを使用すると、ウィンドウの幅がテーブルの幅よりも小さい場合、デフォルトでセルが縮小されるため、各セルの幅が常に 10 ピクセルになるとは限りません。

于 2012-12-14T09:31:48.893 に答える