创建一个均匀划分的数独板

Question

我一直在尝试创建一个简单的数独板，但问题是我在CSS中表现不佳，所以，我无法让数独板看起来正常。我一直在尝试使用Dart lang，并希望继续使用它。

这是sudoku.dart

void makeSudokuBoard(){


  for(var b = 0; b <3; b++){
    var tbody = board.createTBody();
    for(var i = 0; i < 3; i++){

      TableRowElement rows = tbody.addRow();

      for(var j = 0; j < 9; j++){

        String puzzleplace = puzzle.substring(counter, counter+1);
        if(puzzleplace == "0"){ 

          rows.insertCell(j).text = "";
                rows.cells[j].setAttribute("contenteditable","true");


        }else{
        rows.insertCell(j).text = puzzleplace;
        rows.cells[j].setAttribute("contenteditable","false");
        }

        counter++;
      }

    }
    tbody.classes.add("tbody"+b.toString());
  }

  board.classes.add("board");
  document.querySelector('#container').append(board);
  document.querySelector(".board").appendHtml("<colgroup><col><col><col><colgroup><col><col><col><colgroup><col><col><col>");

}

这是我正在使用的css表。

table {

height: 70%;
    width: 40%;
    margin-left: auto;
    margin-right: auto;
    table-layout: fixed;
    text-align: center;
    border-collapse: collapse;

}

colgroup, tbody{

    border: solid medium;
}



tr { border: solid thin; text-align: center;}

以下是它总是如何结果，我无法弄清楚如何解决它

Answer 1

您创建3个表。我认为你应该创建一个包含9行和9列的表，并完全在CSS中进行格式化：

请参阅http://jsfiddle.net/zoechi/45MzU/

table {
    margin-left: auto;
    margin-right: auto;
    table-layout: fixed;
    text-align: center;
    border-collapse: collapse;
}

td {
    border: 1px solid #000;
    width: calc(70vw / 9);
    height: calc(70vw / 9);
}

td:nth-child(3), td:nth-child(6), td:nth-child(9){
    border-right-width: 3px;
}

tr:nth-child(3) td, tr:nth-child(6) td, tr:nth-child(9) td{
    border-bottom-width: 3px;
}

tr:nth-child(1) td{
    border-top-width: 3px;
}

td:nth-child(1) {
    border-left-width: 3px;
}