包含表格的 div 上的 box-shadow 问题（高度问题）答案

【问题标题】：Problem with box-shadow on div containing table(height problem)包含表格的 div 上的 box-shadow 问题（高度问题）
【发布时间】：2011-06-21 12:17:52
【问题描述】：

大家好，我在 div 上有一个盒子阴影。

    #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 行左右，但如果不是，它就不能正确显示。

在这张照片中，阴影在桌子下方。我不知道该怎么做才能解决这个问题。感谢您的帮助。

编辑

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

【问题讨论】：

如果您可以在 jsfiddle.net 上创建一个最小的示例，我们可以为您提供更好的帮助
当然jsfiddle.net/jZvqe/7

标签： javascript jquery datatables css

【解决方案1】：

我不明白到底是什么问题，它可能有助于知道 datatables 创建了一个带有类 dataTables_wrapper 的 div 环绕表（我认为它在你的 div 和你的情况下的表之间）并且有一个min_height 为 302px，高度为 302px。数据表的创建者说他这样做是为了避免混乱，但是当行数很少时，这会产生一些奇怪的效果。

所以我通常在我的 css 中添加这个：

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

注意在 demo_table.css 之后导入的 css 文件中声明。

我已经通过删除一些行来编辑这个小提琴：http://jsfiddle.net/jZvqe/8/ --> 你有 tro plobem

添加了 CSS 行：http://jsfiddle.net/jZvqe/9/ --> 阴影没问题

【讨论】：

谢谢先生。完美运行。

【解决方案2】：

overviewDiv 似乎有一个最小高度。无论如何， br 标签在那里做什么，也许这会迫使 div 增长？这么少的信息很难知道...

【讨论】：

添加了一个最小高度为 302px 的 div，它是由数据表创建的，它仅在表的行数很少时显示。