css - HTML5 和 CSS - 我的 rowspan 和 colspan 一定有问题

Question

这应该是一个数独表。我检查了 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;
}

Answer 1

您的背景图片似乎不够大。

尝试用背景颜色替换图像，看看基本效果是否正确，看看图像出了什么问题，也许删除 background-repeat:no-repeat;。参见 http://jsfiddle.net/d6ZNF/1/用于使用纯色。

调试时，还要记住 CSS 是区分大小写的。我还建议使用像 Firebug 这样的工具适用于 Firefox(免费下载)或 developer tools in Chrome (按 F12)检查可疑元素并查看对它们应用了哪些 CSS 类(如果有)。