Styling a sudoku grid

Question

I’ve created a sudoku puzzle creator / solver and need a bit of help with some CSS to style it.

Typically they are styled like this:

.

Some naming I’m us

Answer 1

By combining Jukka K. Korpela's answer with Mike's answer and adding a bit of jQuery magic, I have created two solutions.

$(document).ready(function () {
    var data = [
        1, 0, 3, 6, 0, 4, 7, 0, 9, // 0x0
        0, 2, 0, 0, 9, 0, 0, 1, 0, // 0x1
        7, 0, 0, 0, 0, 0, 0, 0, 6, // 0x2
        2, 0, 4, 0, 3, 0, 9, 0, 8, // 1x0
        0, 0, 0, 0, 0, 0, 0, 0, 0, // 1x1
        5, 0, 0, 9, 0, 7, 0, 0, 1, // 1x2
        6, 0, 0, 0, 5, 0, 0, 0, 2, // 2x0
        0, 0, 0, 0, 7, 0, 0, 0, 0, // 2x1
        9, 0, 0, 8, 0, 2, 0, 0, 5  // 2x2
    ];

    // Build page content.
    $('body').append($('
').addClass('wrapper')
        .append($('
').addClass('col')
          .append($('
').html('First Method'))
          .append(generateSudokuGrid()))
        .append($('
').addClass('col')
          .append($('
').html('Second Method'))
          .append(generateSudokuGrid2())));

    // Populate grids with data.
    $('table[class^="sudoku"]').each(function (index, grid) {
        populateGrid($(grid), data);
    });
});

function populateGrid(grid, data) {
    grid.find('td').each(function (index, td) {
        $(td).text(data[index] || '');
    });
}

/* First Method */
function generateSudokuGrid(data) {
    return $('').append(multiPush(3, function () {
        return $('').append(multiPush(3, function () {
            return $('');
        }));
    })).append(multiPush(3, function () {
        return $('').append(multiPush(3, function () {
            return $('').append(multiPush(9, function () {
                return $('
');
            }));
        }));
    })).addClass('sudoku');
}

/* Second Method */
function generateSudokuGrid2(data) {
    return $('').append(multiPush(9, function () {
        return $('').append(multiPush(9, function () {
            return $('
');
        }));
    })).addClass('sudoku2');
}

function multiPush(count, func, scope) {
    var arr = [];
    for (var i = 0; i < count; i++) {
        arr.push(func.call(scope, i));
    }
    return arr;
}
/* First Method */
table.sudoku {
    border-collapse: collapse;
    font-family: Calibri, sans-serif;
}
.sudoku colgroup, tbody {
    border: solid medium;
}
.sudoku td {
    border: solid thin;
    height: 1.4em;
    width: 1.4em;
    text-align: center;
    padding: 0;
}

/* Second Method */
table.sudoku2 {
    border-collapse: collapse;
    font-family: Calibri, sans-serif;
}
.sudoku2 tr:nth-of-type(3n) {
    border-bottom: solid medium;
}
.sudoku2 td:nth-of-type(3n) {
    border-right: solid medium;
}
.sudoku2 td {
    border: solid thin;
    height: 1.4em;
    width: 1.4em;
    text-align: center;
    padding: 0;
}

/* Presentation Formatting [Ignore] */
table[class^="sudoku"] {
  margin: 0 auto;
}
.wrapper {
  width: 100%;
}
.col {
  display: inline-block;
  width: 50%;
  text-align: center;
  margin: 0 auto;
  padding: 0;
}




    

             

                                                        
            
            

              
                
                0
              
                   
                
               讨论(0)
              
                                                  
              
              

                          
             
       
          
              
                                       

     查看其它5个回答


            
                         

                    



               
            

    发布评论:
    

         
                        
    
    
提交评论 
  
  

                    
                    

                    

                        

                        
                         加载中...
                        
                    
                
          
                              			
        
        
        

          

            
            

              
              

            
    


                                 
              
            
                          
    

        
         

                验证码
                

                  
                
                

                   看不清?
                
              
                                  

                    
   
                 
             
              
提交回复
            
          
        
      
       
      
    
    

          
 
     
 

        
热议问题