设计数独网格 [英] Styling a sudoku grid

问题描述

我创建了一个数独益智游戏的创建者/解算器，需要一些CSS来帮助它。

通常它们的样式如下： p>

。

我使用的一些命名。

电池 - 每个包含单个号码的单个单元格。

Box - 9个框中的一个，每个框包含3 x 3个单元格

网格 p>

我的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 =textmaxlength =1value =<％= val％> < / div> < div class =cell> < input name =cell [1]type =textmaxlength =1value =<％= val％> < / div> <！ -  ...  - > < div class =cell> < input name =cell [79]type =textmaxlength =1value =<％= val％> < / div> < div class =cell> < input name =cell [80]type =textmaxlength =1value =<％= val％> < / div> < / div>< / form>  

用左上角的第一个单元格（0）创建基本的9x9网格，并且从左到右移动一行，一行移动到右下角的最后一个单元格（80）。

难度是为每个单元格设置样式，以使网格可以显示为不仅分成行和列，而且分成9个较大的框。再次此网格可供参考。

目前我有几个选项：

1. 完全重写我的数独代码，以不同的顺序。将每个框包装在分组DIV中。这将使CSS相对直接。




2. 手动标识每个单元格，并为所有81个单元格写入相应的CSS 。

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

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

解决方案

以下是对 表元素部分，说明 colgroup 用于分组列， tbody 用于分组行。此分组可让您在群组周围设置不同于单元格周围的边框。

 < style& 
 table {border-collapse：collapse; font-family：Calibri，sans-serif; } 
 colgroup，tbody {border：solid medium; } 
 td {border：solid thin;身高：1.4em; width：1.4em; text-align：center; padding：0; } 
< / style> 
< table> 
< caption>一天的数独< / caption> 
< colgroup>< col>< col>< col> 
< colgroup>< col>< col>< col> 
< colgroup>< col>< col>< col> 
< 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> 
  

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 using.

Cell - each individual cell which contains a single number.

Box - one of the 9 boxes each containing 3 x 3 cells

Grid - the entire 9x9 playing area.

My html is partially generated by my ruby / Sinatra app (at least the repeating DIV’s are) and structured as such :

#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>

This allows me to create the basic 9x9 grid with my first cell (0) in the top left corner and moving left to right, a row at a time, to the last cell (80) in the bottom right.

The difficulty is styling each cell so that the grid can appear split not only into rows and columns but also into the 9 larger boxes. Again see this grid for reference.

Currently I have a couple of options :

1. Completely rewrite my sudoku code so that I draw out the DIV’s in a different order. Wrapping each box in a grouping DIV. This would make the CSS relatively straight forward. This would be a major change and I really don’t want to go down this route.

2. Manually ID each cell and write the corresponding CSS for all 81 cells. Better than above but still a ball ache and not particularly slick.

I do have the option of dynamically generating the CSS styling (performance is not an issue). What I’m looking for is some help with devising an algorithm that will determine (based on it’s linear index 0..80) how each cell should be styled.

For example all the cells in the top row (0..8) will have a thick top border (3px) and a thin bottom border (1px). The bottom of all the cells in row 3 (18..26) would have a thick border but the top of those cells would have a thin border. The left hand side of all the cells in the first column would have a thick border, but the right hand side of those cells would have a thin border. And so on.

解决方案

The following is a slight modification of an example in the table element section in HTML5 CR, illustrating the use of colgroup for grouping columns and tbody for grouping rows. This grouping lets you set different borders around the groups than otherwise around cells.

<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><col><col><col>
  <colgroup><col><col><col>
  <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>

这篇关于设计数独网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！