균일하게 나누어 진 스도쿠 게시판 만들기

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 시트입니다. 항상 그러나 판명 나는 당신이 3 개 테이블을 만들고 그것을

Answer 1

해결하는 방법을 알아낼 수 없습니다 방법은 다음과

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;} 

이다. 난 당신이 9 행 9 열이 하나 개의 테이블을 작성해야한다고 생각하고 CSS에서 완전히 서식을 수행

내가 테이블 크기의 70 % (동적 크기)를 만드는 내 대답을 업데이트 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; 
}