html table background not showing? - html

Question

I have a nested table inside each cell of my outer table.I want to set a background image for one of the cells so I created a specific class called "innerraya" to set the background image for that nested table.However,nothing seems to be changed at all.
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");
}
OUTPUT
it works now but the whole table is screwed up
The image is there if I used it as a td background or a normal img src but does not work if the whole table background is changed.What is the reason?

Answer 1

IT IS SOLVED!
The issue is that inner table layout is not fixed so I had to add this code inside the innerraya class.
table-layout: fixed;
The whole code looks like this :
table.innerraya
{
width: 100%;
height: 100%;
table-layout: fixed;
background-image: url("daunketupat.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
OUTPUT

Answer 2

Please go the url below, I have created a jsfiddle for you:
https://jsfiddle.net/ew55L41b/
Hope this will help you :)
Also the code is below:
<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");
}