2014-10-10 4 views
0

У меня есть стол и маска, вот пример:Как охватить маску над столом

<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> 

Я хочу, чтобы таблица маски, чтобы охватить только ширину и высоту таблицы, не далее, но это берет целая страница. Что я могу сделать?

+0

Позиция внешний 'div' родственник, так что она действует в качестве точки отсчета для абсолютно позиционированного элемента внутри. И сделайте так, чтобы ширина таблицы была равна ширине таблицы, если она еще не была (например, через 'display: inline-block') – CBroe

+0

, чтобы очистить ваш вопрос, и ваш код проверяет атрибут стиля тега таблицы, вы удвоили его. – thetont

ответ

0

просто добавьте позицию относительно родительского 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>