Проблема с box-shadow на div с таблицей (проблема с высотой)

Question

Привет, ребята, у меня есть тень от коробки.

    #overviewDiv {

        -webkit-box-shadow:0 40px 40px -40px #AAA;
        -moz-box-shadow:0 40px 40px -40px #AAA;
        box-shadow:0 40px 40px -40px #AAA;

    }

<div id="overviewDiv" >       
    <br />

    <table class="display" id="pkgLineTable"  >
        <thead> 
            <tr>        
                <th style="width:120px">&{'views.overview.location'}</th>                 
                <th style="width:200px">&{'views.overview.linename'}</th>
                <th style="width:200px">&{'views.overview.description'}</th> 
                <th style="width:200px">&{'views.overview.linestatus'}</th> 
            </tr> 
        </thead>
    </table>
</div>

Тень блока выглядит нормально с 10 строками или около того, но если нет, то она не отображается правильно.

На этой картинке тень под столом. Я не уверен, что нужно сделать, чтобы это исправить. Спасибо за любую помощь.

EDIT

http://jsfiddle.net/jZvqe/7/

Answer 1

Я не совсем понимаю, в чем проблема, может быть полезно знать, что datatables создает div с классом dataTables_wrapper, который оборачивается вокруг таблицы (я думаю, что она проходит между вашим div и таблицей в вашем случае) и имеет min_height 302px и высота 302px. Создатель таблиц данных говорит, что он делает это, чтобы избежать беспорядка, но это имеет некоторые странные эффекты, когда у вас есть небольшие строки.

поэтому я обычно добавляю это в мой css:

.dataTables_wrapper {
   _height: 102px;
   min-height: 102px;
}

Будьте осторожны, чтобы объявить это в файле CSS, импортированном после demo_table.css.

Я отредактировал эту скрипку, убрав несколько строк: http://jsfiddle.net/jZvqe/8/ -> у вас есть трофей

Добавлены строки CSS: http://jsfiddle.net/jZvqe/9/ -> с тенью все в порядке

Answer 2

Кажется, что обзор Div так или иначе имеет минимальную высоту.Что там делает тег br в любом случае, возможно, это заставляет div расти?Трудно узнать с таким небольшим количеством информации ...