css - 使用 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 表格代码，因为它是在运行时使用 backgrid.js 和主干.marionette.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);
}

（更改为您想要的颜色等）