How to span a mask over a table

Question

I have a table and a mask, here's an example:

    <div><div style='width:100%;height:100%;z-index:999;position:absolute;background-color:#000000;opacity:0.6;' id='tableMask'>
</div>
<table style='padding:5px;text-align:center;border-collapse:collapse;' id='applicationsTable'>
<tr><td>content</td><td>content</td><td>content</td></tr>
<tr><td>content</td><td>content</td><td>content</td></tr>
<tr><td>content</td><td>content</td><td>content</td></tr>
</table></div>

I want table mask to span only the table's width and height, no further, but it takes the whole page. What can I do?

Answer 1

just add position:relative to the parent div.

   <div style="position:relative"><div style='width:100%;height:100%;z-index:999;position:absolute;background-color:#000000;opacity:0.6;' id='tableMask'>
    </div>
    <table style='padding:5px;text-align:center;border-collapse:collapse;' id='applicationsTable'>
    <tr><td>content</td><td>content</td><td>content</td></tr>
    <tr><td>content</td><td>content</td><td>content</td></tr>
    <tr><td>content</td><td>content</td><td>content</td></tr>
    </table></div>