【发布时间】：2014-11-17 19:50:17
【问题描述】：
这应该是一个数独表。我检查了 css 元素，一切似乎都处于良好的工作状态。我认为我在表中的 colspan 和 rowspan 中犯了错误。 “greenBox”和“goldBox”类应该使背景图像跨越 3 行和 3 列；但是，在数独 9x9 表中，只有 9 个正方形填充了背景图像。非常感谢您的帮助。感谢您的宝贵时间。
<table class="spuzzle">
<caption>Sudoku</caption>
<thead>
<tr>
<th> </th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
</tr>
</thead>
<tbody>
<tr>
<th>A</th>
<td class="greenBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td> </td>
<td>4</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td>5</td>
<td> </td>
</tr>
</table>
</td>
<td class="goldBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td>5</td>
<td> </td>
<td>3</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
<td class="greenBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td>7</td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td>1</td>
<td> </td>
</tr>
<tr>
<td>2</td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<th>B</th>
</tr>
<tr>
<th>C</th>
</tr>
<tr>
<th>D</th>
<td class="goldBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>6</td>
<td> </td>
<td>9</td>
</tr>
<tr>
<td>4</td>
<td>7</td>
<td>2</td>
</tr>
</table>
</td>
<td class="greenBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td>2</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>9</td>
<td> </td>
</tr>
</table>
</td>
<td class="goldBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td>9</td>
<td>3</td>
<td>7</td>
</tr>
<tr>
<td>4</td>
<td> </td>
<td>8</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<th>E</th>
</tr>
<tr>
<th>F</th>
</tr>
<tr>
<th>G</th>
<td class="greenBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td> </td>
<td>1</td>
</tr>
<tr>
<td> </td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td> </td>
<td>6</td>
<td> </td>
</tr>
</table>
</td>
<td class="goldBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>8</td>
<td> </td>
<td>1</td>
</tr>
</table>
</td>
<td class="greenBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td>5</td>
<td>2</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>7</td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<th>H</th>
</tr>
<tr>
<th>I</th>
</tr>
</tbody>
`
</table>
CSS 发布在下面。但我相信它正在发挥应有的作用。
table.spuzzle
{
border-collapse:collapse;
}
table.subTable
{
border-collapse:collapse;
}
table.spuzzle td
{
border:5px outset gray;
}
table.spuzzle th
{
font-size:8px;
color:gray;
}
tbody th
{
height:40px;
}
table.subTable td
{
font-size:20px;
color:blue;
width:40px;
height:40px;
text-align:center;
vertical-align:middle;
border:1px solid black;
}
td.goldBox
{
background-image:url("gold.jpg");
background-position:center center;
background-repeat:no-repeat;
}
td.greenBox
{
background-image:url("green.jpg");
background-position:center center;
background-repeat:no-repeat;
}
【问题讨论】：
-
你能提供一个链接到这个页面吗？或者一个jsfiddle也许？你的图片有多大？您将
background-repeat设置为no-repeat，因此如果图像太小，它们将无法填满方框。 -
图像显示在 81 个方块中的 9 个中。我真的认为我在 rowspan 和 colspan 中搞砸了；但是，我在桌子方面不是很好。
-
如果您不提供更多内容，我无能为力。这是我在小提琴jsfiddle.net/ginovva320/d6ZNF 中看到的。如果没有与您的图像的相对链接，就不可能看到发生了什么。至少能给个截图吗？
-
我没有足够的声望点来发布截图。