CSS - 创建 9x9 数独网格的最佳方法是什么？

我正在开展一些项目来改进我的 HTML 和 CSS。其中之一是简单的数独求解器。我需要创建一个网格来放置标签或文本框。我想要一个与此中的网格图像完全相同的网格布局question https://stackoverflow.com/questions/305860/how-would-you-construct-and-interact-with-a-grid-like-a-sudoku-board.

实现这一目标的最佳方法是什么？ CSS...还是表格？我将如何创建这个？

如果是表格数据，可以使用表格。如果您想坚持使用 DIV，您可以通过为每个父立方体和子立方体设置特定的宽度/高度值，然后简单地将它们向左/右浮动来轻松实现。请务必使用clear fix如果您决定不使用显式宽度/高度值，则可以防止内容流过其同级标签。

#sudoku {
  width:297px;
  height:297px;
}
  .parentCube {
    width:99px;
    height:99px;
    float:left;
  }
    .childCube {
      width:33px;
      height:33px;
      float:left;
    }

<div id="sudoku">
  <div class="parentCube">
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
  </div>
  <div class="parentCube">
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
  </div>
  <div class="parentCube">
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
  </div>
</div>