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这样的工具（免费下载）或developer tools in Chrome（点击F12）来检查可疑元素，看看CSS类应用于什么（如果有的话）。

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

1 个答案: