设计数独网格

我已经创建了一个数独拼图创建者/解算器，并需要一些CSS的帮助来设计它。

通常它们的样式如下：

http://sofzh.miximages.com/html/grid.jpg 。

我正在使用的一些命名。

单元格 – 每个单独的单元格包含一个数字。

Box – 9个盒子中的一个，每个盒子包含3 x 3个细胞

网格 – 整个9×9播放区域。

我的html部分由我的ruby / Sinatra应用程序生成（至少是重复的DIV）并且结构如下：

#game { margin-left: auto; margin-right: auto; width: 360px; } .cell input { display: inline-block; float: left; width: 40px; height: 40px; border-style: solid; border-width: 1px; text-align: center; font-size: 15px; } 

 
 
 
 <input name="cell[0]" type="text" maxlength="1" value=> 
 
 <input name="cell[1]" type="text" maxlength="1" value=> 
  
 <input name="cell[79]" type="text" maxlength="1" value=> 
 
 <input name="cell[80]" type="text" maxlength="1" value=> 
 
  

这允许我创建基本的9×9网格，我的第一个单元格（0）位于左上角，并且从左到右，一次一行，到右下角的最后一个单元格（80）。

难点在于对​​每个单元格进行样式设置，使得网格不仅可以分为行和列，还可以分成9个较大的框。 再次参见此网格以供参考。

目前我有几个选择：

1. 完全重写我的数独代码，以便我以不同的顺序绘制DIV。 在分组DIV中包装每个框。 这将使CSS相对简单。 这将是一个重大变化，我真的不想走这条路。

2. 手动ID每个单元格并为所有81个单元格编写相应的CSS。 比上面更好，但仍然是一个球疼，而不是特别光滑。

我可以选择动态生成CSS样式（性能不是问题）。 我正在寻找的是设计一种算法的一些帮助，该算法将确定（基于它的线性索引0..80）每个单元格应该如何设置样式。

例如，顶行（0..8）中的所有单元格将具有粗顶边框（3px）和薄底边框（1px）。 第3行（18..26）中所有单元格的底部将具有粗边框，但这些单元格的顶部将具有薄边框。 第一列中所有单元格的左侧将具有粗边框，但这些单元格的右侧将具有薄边框。 等等。

Answer 1

以下是对HTML5 CR中table元素部分中的示例的略微修改，说明了使用colgroup对列进行分组，使用tbody对行进行分组。 通过此分组，您可以在组周围设置不同的边框，而不是在单元格周围。

  
 
Sudoku of the day
    
 
 
1 
 
3 
6 
 
4 
7 
 
9 
 
 
2 
 
 
9 
 
 
1 
 
 
7 
 
 
 
 
 
 
 
6 
 
 
2 
 
4 
 
3 
 
9 
 
8 
 
 
 
 
 
 
 
 
 
 
 
5 
 
 
9 
 
7 
 
 
1 
 
 
6 
 
 
 
5 
 
 
 
2 
 
 
 
 
 
7 
 
 
 
 
 
9 
 
 
8 
 
2 
 
 
5  

Answer 2

通过将Jukka K. Korpela的答案与Mike的答案相结合并添加一些jQuery魔法，我创建了两个解决方案。

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

Answer 3

如果是我，我会使用一个包含9行和9列的表格。

然后在CSS选择器中使用：nth-​​of-type（3n）来设置每三个行和列的边框。

Answer 4

我将创建数独板如下：

而LESS就是这样的

 @cell-size: 50px; .sudoku { margin: 70px auto; width: 478px; background: #777; border: 2px solid #000; box-shadow: 15px 15px 20px #111; .sudoku-row { .sudoku-square { float: left; border: 1px solid #000; .cell:nth-child(3n+1) { clear: both; } .cell { float: left; position: relative; height: @cell-size; width: @cell-size; background:#fff; border: 1px solid #000; box-sizing: content-box; a { margin: 0; padding: 0; } a.cell-value { display: block; font-size: 30px; color: #000; width: @cell-size; height: @cell-size; text-align: center; } a.cell-value:hover { text-decoration: none; } } } clear: both; } } 

你可以在这里找到现场演示

Answer 5

伟大的解决方案Jukka 。 我使用了这个和以下.erb代码的组合来动态生成表并弹出内容。

@current_solution是我的数组，包含每个单元格的值。

 <% 3.times do |all_box_rows_value|%>  <% 3.times do |box_row_value| %> <% all_box_rows = all_box_rows_value * 27 %> <% all_rows = ((box_row_value +1 ) * 9)-9 %> <%9.times do |row| %> <% index = all_box_rows+all_rows+row %> <% value = @current_solution[index] %>
    
 <% colour_class = get_colour_class index %>  > <% end %> <% end %> <% end %>