使用CSS的框阴影

Question

我正在尝试创建一个如下图所示的表：

我还创建了上面的表格，除了上面的样式。我的桌子。

这就是我的CSS：

.table thead th {
    vertical-align: middle;
    background-color: #FFFFFF;
    border-bottom: thin;
    border-top: thick;
    border-bottom-width: 4px;
    width:300px;
    height:30px;
    background-color:white;
    box-shadow: 2px 2px 5px grey;
    border-bottom : thin;
    border-top:thick;
}
.table th {
    font-weight: bold;
    cursor: pointer
    width:100%;
    height:40px;
    background-color:#FFFFFF;
    box-shadow: 0 0 5px grey;
    border-bottom: thin; 
    border-top:thick;
    vertical-align: middle;
    border: 1px solid #DDD

}
.table th,.table td {
    height: 20px;
    max-width: 250px;
    padding: 1px 5px 2px 10px;
    overflow: hidden;
    line-height: 20px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    border: 1px solid #DDD
}

结果不是我想要的。我无法为您提供html表代码，因为它是在运行时使用带有backbone.marionette.js的backgrid.js生成的

更新：

this is the CSS



box-shadow: 
        inset 0px 11px 8px -10px #CCC,
        inset 0px -11px 8px -10px #CCC;

但是在td之间仍然可以看到这条线，我想只显示水平线而不是垂直线。

怎么做？

请帮我完成这件事。

Answer 1

在表格之前添加以下元素：

<div id="fade"></div>

在CSS文件中：

#fade {
height: 22px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,255)), color-stop(50%,rgba(247,247,247,247)), color-stop(51%,rgba(245,245,245,245)), color-stop(100%,rgba(243,243,243,243)));
background: -webkit-linear-gradient(top, rgba(255,255,255,255) 0%,rgba(247,247,247,247) 50%,rgba(245,245,245,245) 51%,rgba(243,243,243,243) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,255) 0%,rgba(247,247,247,247) 50%,rgba(245,245,245,245) 51%,rgba(243,243,243,243) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,255) 0%,rgba(247,247,247,247) 50%,rgba(245,245,245,245) 51%,rgba(243,243,243,243) 100%);
filter: progid:DXImageTransform.Microsoft.Gradient( StartColorStr='#00ffffff', EndColorStr='#00f3f3f3', GradientType=1);
}

（改变你想要的颜色等）