0
这应该是一个数独表。我检查了CSS元素，一切看起来都很好。我认为我在表格中的colspan和rowspan中犯了错误。 “greenbox”和“goldBox”课程应该使背景图像跨越3行和3列;然而，在数独9x9表格中，只有9个方格填充了背景图像。非常感谢您的时间。HTML5和CSS - 我的rowspan和colspan必须有错误
<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个中显示。我真的认为我在排队和colspan中搞砸了;然而，在表格方面，我不太好。 – user3263352
如果你没有提供更多的功能，我无法提供帮助。以下是我在小提琴http://jsfiddle.net/ginovva320/d6ZNF/中看到的内容。没有与图像的相对链接，就不可能看到发生了什么。你至少可以截图吗？ –