我已经创建了一个数独谜题创建者/解算器，并需要一些CSS的帮助来设计它。
通常它们的样式如下：
http://www.sudoku.4thewww.com/Grids/grid.jpg
我正在使用的一些命名。
单元格 - 每个单独的单元格包含一个数字。
Box - 9个盒子中的一个，每个盒子包含3 x 3个细胞
网格 - 整个9x9游戏区域。
我的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;
}<form action="/" method="post">
<div id="game">
<div class="cell">
<input name="cell[0]" type="text" maxlength="1" value=<%=val%>>
</div>
<div class="cell">
<input name="cell[1]" type="text" maxlength="1" value=<%=val%>>
</div>
<!-- ... -->
<div class="cell">
<input name="cell[79]" type="text" maxlength="1" value=<%=val%>>
</div>
<div class="cell">
<input name="cell[80]" type="text" maxlength="1" value=<%=val%>>
</div>
</div>
</form>
这允许我创建基本的9x9网格，我的第一个单元格（0）位于左上角，并且从左到右，一次一行，到右下角的最后一个单元格（80）。
难度在于为每个单元格设置样式，以便网格不仅可以分为行和列，还可以分成9个较大的框。再次参阅this grid以供参考。
目前我有几个选择：
完全重写我的数独代码，以便我以不同的顺序绘制DIV。在分组DIV中包装每个框。这将使CSS相对简单。这将是一个重大变化，我真的不想走这条路。
手动识别每个单元格并为所有81个单元格编写相应的CSS。比上面好，但仍然是一个球疼，而不是特别光滑。
我可以选择动态生成CSS样式（性能不是问题）。我正在寻找的是设计一种算法的一些帮助，该算法将确定（基于它的线性索引0..80）每个单元格应该如何设置样式。
例如，顶行（0..8）中的所有单元格都有一个厚顶边框（3px）和一个薄底边框（1px）。第3行（18..26）中所有单元格的底部将具有粗边框，但这些单元格的顶部将具有薄边框。第一列中所有单元格的左侧将具有粗边框，但这些单元格的右侧将具有薄边框。等等。
答案 0 :(得分：3)
以下是对HTML5 CR中table element部分中的示例的略微修改，说明了使用colgroup对列进行分组，使用tbody对行进行分组。通过此分组，您可以在组周围设置不同的边框，而不是在单元格周围设置。
<style>
table { border-collapse: collapse; font-family: Calibri, sans-serif; }
colgroup, tbody { border: solid medium; }
td { border: solid thin; height: 1.4em; width: 1.4em; text-align: center; padding: 0; }
</style>
<table>
<caption>Sudoku of the day</caption>
<colgroup><col><col><col></colgroup>
<colgroup><col><col><col></colgroup>
<colgroup><col><col><col></colgroup>
<tbody>
<tr> <td>1 <td> <td>3 <td>6 <td> <td>4 <td>7 <td> <td>9
<tr> <td> <td>2 <td> <td> <td>9 <td> <td> <td>1 <td>
<tr> <td>7 <td> <td> <td> <td> <td> <td> <td> <td>6
<tbody>
<tr> <td>2 <td> <td>4 <td> <td>3 <td> <td>9 <td> <td>8
<tr> <td> <td> <td> <td> <td> <td> <td> <td> <td>
<tr> <td>5 <td> <td> <td>9 <td> <td>7 <td> <td> <td>1
<tbody>
<tr> <td>6 <td> <td> <td> <td>5 <td> <td> <td> <td>2
<tr> <td> <td> <td> <td> <td>7 <td> <td> <td> <td>
<tr> <td>9 <td> <td> <td>8 <td> <td>2 <td> <td> <td>5
</table>
答案 1 :(得分：3)
通过将Jukka K. Korpela's answer 与Mike's answer相结合并添加一些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($('<div>').addClass('wrapper')
.append($('<div>').addClass('col')
.append($('<h1>').html('First Method'))
.append(generateSudokuGrid()))
.append($('<div>').addClass('col')
.append($('<h1>').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 $('<table>').append(multiPush(3, function () {
return $('<colgroup>').append(multiPush(3, function () {
return $('<col>');
}));
})).append(multiPush(3, function () {
return $('<tbody>').append(multiPush(3, function () {
return $('<tr>').append(multiPush(9, function () {
return $('<td>');
}));
}));
})).addClass('sudoku');
}
/* Second Method */
function generateSudokuGrid2(data) {
return $('<table>').append(multiPush(9, function () {
return $('<tr>').append(multiPush(9, function () {
return $('<td>');
}));
})).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;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
答案 2 :(得分：1)
我会创建数独板，如下所示：
<section class="sudoku">
<div class="sudoku-row">
<div class="sudoku-square">
<div class="cell"><a class="cell-value"></a></div>
<div class="cell"><a class="cell-value"></a></div>
<div class="cell"><a class="cell-value"></a></div>
<div class="cell"><a class="cell-value"></a></div>
<div class="cell"><a class="cell-value"></a></div>
<div class="cell"><a class="cell-value"></a></div>
<div class="cell"><a class="cell-value"></a></div>
<div class="cell"><a class="cell-value"></a></div>
<div class="cell"><a class="cell-value "></a></div>
</div>
而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;
}
}
您可以找到实时演示here
答案 3 :(得分：0)
出色的解决方案Jukka。我使用了这个和以下.erb代码的组合来动态生成表并弹出内容。
@current_solution是我的数组，包含每个单元格的值。
<table>
<colgroup><col><col><col>
<colgroup><col><col><col>
<colgroup><col><col><col>
<% 3.times do |all_box_rows_value|%>
<tbody>
<% 3.times do |box_row_value| %>
<% all_box_rows = all_box_rows_value * 27 %>
<% all_rows = ((box_row_value +1 ) * 9)-9 %>
<tr><%9.times do |row| %>
<% index = all_box_rows+all_rows+row %>
<% value = @current_solution[index] %><td>
<% colour_class = get_colour_class index %>
<input name="cell[]" type="text" maxlength="1" autocomplete="off" value=<%=value%> >
<% end %>
<% end %>
<% end %>
</table>