html表格背景不显示？

Question

我的外部表格的每个单元格内都有一个嵌套表格。我想为其中一个单元格设置背景图像，因此我创建了一个名为“innerraya”的特定类来设置该嵌套表格的背景图像。但是，似乎什么都没有改变。

HTML

<td class="luar"> 
        <table class="innerraya"> 
            <tr>
                <td>7</td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td colspan="3" id="d7">
                        <p id="d7Event"></p>
                    </td>
            </tr>
            <tr>
                <td colspan="2"></td>
                <td style="text-align:right">29</td>
            </tr>
        </table>
        </td>

CSS

.innerraya
{
    width:100%;
    height:100%;
    position:absolute;
    background-image:url("daunketupat.jpg");

}

输出

它现在可以工作了，但整个桌子搞砸了

如果我将它用作td背景或普通img src，则图像在那里，但如果整个表格背景发生变化，则无法使用。这是什么原因？

Answer 1

解决了！

问题是内部表格布局没有固定，所以我不得不在 innerraya 类中添加这段代码。

 table-layout: fixed;

整个代码如下所示：

    table.innerraya
{
   width: 100%;
  height: 100%;
  table-layout: fixed;
  background-image: url("daunketupat.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;

}

输出

Answer 2

请转到下面的网址，我已经为你创建了一个 jsfiddle：

https://jsfiddle.net/ew55L41b/

希望对你有帮助:)

代码如下：

<table>
    <tr>
        <td>
            <table class="innerraya">
                <tr>
                    <td>7</td>
                    <td colspan="2"></td>
                </tr>
                <tr>
                    <td colspan="3" id="d7">
                        <p id="d7Event"></p>
                    </td>
                </tr>
                <tr>
                    <td colspan="2"></td>
                    <td style="text-align:right">29</td>
                </tr>
            </table>
        </td>
        <td>
            <table class="">
                <tr>
                    <td>7</td>
                    <td colspan="2"></td>
                </tr>
                <tr>
                    <td colspan="3" id="d7">
                        <p id="d7Event"></p>
                    </td>
                </tr>
                <tr>
                    <td colspan="2"></td>
                    <td style="text-align:right">29</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

CSS---

table.innerraya
{
    width:100%;
    height:100%;
    position:absolute;
    background-image: url("http://www.w3schools.com/cssref/paper.gif");
}