Question

希望这很简单：

我有两张桌子，但不希望盒子阴影互相投射。有办法解决这个问题吗？我z-index没有运气。

我已经包含了我的所有CSS代码，只是包含了相关的内容 - Example。

＆＃13;

html {
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}
body {
    color: rgb(000,000,000);
    background: rgb(256,256,256);
    background: -webkit-linear-gradient(rgb(42,109,142), rgb(111,197,228));
    background:    -moz-linear-gradient(rgb(42,109,142), rgb(111,197,228));
    background:         linear-gradient(rgb(42,109,142), rgb(111,197,228));
    height: 800px;
    background-repeat: no-repeat;
    background-color: rgb(111,197,228);
    font-family: verdana, arial, sans-serif;
    font-size: small;
}

table {
    word-wrap: normal;
    border-style: outset;
    border-width: 0px; 
    border-style: solid;
    border-color: rgb(75,75,75);
    margin-left: auto;
    margin-right: auto;
    color: black;
    width: 400px;
    font-family: verdana, arial, sans-serif;
    font-size: small;
    text-align: right;
    vertical-align: text-top;
    padding: 15px;
    border-radius:0px;
    background-color: rgb(256,256,256);
    box-shadow: 5px 5px 15px rgb(50,50,50);
}

tr {
    border: solid;
    border-width: 2px 0;
}

table tr:nth-child(odd) td{
    background-color: rgb(202,233,244);
    vertical-align: text-top;
}

table tr:nth-child(even) td{
    background-color: rgb(80,183,222);
    vertical-align: text-top;
}

tr:first-child {
    border-top: none;
}

tr:last-child {
    border-bottom: none;
}

th {
    white-space: nowrap;
    text-align: center;
    color: rgb(20,85,109);
}

＆＃13;

<table>
    <tr>
        <td>
            blah
        </td>
        <td>
            blah
        </td>
        <td>
            blah blah blah blah
        </td>
    </tr>
</table>
<table>
    <tr>
        <td>
            blah
        </td>
        <td>
            blah
        </td>
    </tr>
</table>

＆＃13;

Answer 1

我不确定这是否符合您的需求，但一个选项是添加一个白色背景颜色的伪元素到 2nd，3rd，... {{1} } s - 使用adjacent sibling combinator table作为+ - 以覆盖表格之间的影子。

<强> Example Here

table + table::after

Answer 2

此处列出的几种方法：

1）只需将它全部放在一个表中，但使用<tbody>分隔内容或使用colspan来创建不同的内容，

2）使用像表这样的伪类：last-child或table：last-of-type或table：nth-child（x） - 区分并在最后一个表上放置不同的阴影然后用于一般投影使用另一个只突出显示表右侧的投影，或

3）为所有表格制作一个div包装器，将阴影放在其上，删除表格上的阴影。

Answer 3

您没有对box-shadow进行此类控制。您可以做的最好是更改紧接在另一个表之前的表的阴影位置：

table~table {
    box-shadow: 5px 10px 15px rgb(50,50,50);
}

请注意，它确实使阴影有点不同

https://jsfiddle.net/vk45mnb6/5/

其他可能的解决方案是使用包装器div。然后，您可以将框阴影应用于它：

HTML

<div class="table-wrapper">
    <table>
        [...]
    </table>
    <table>
        [...]
    </table>
</div>

CSS

div.table-wrapper {
    box-shadow:5px 5px 15px rgb(50,50,50);
}

div.table-wrapper > table {
   box-shadow: none;
}

Answer 4

您必须使用relative定位元素才能使用z-index。如果盒子阴影扩展为15，并且有两个相邻元素，那么您将会有一些重叠。如果将其减小到5，则阴影不会重叠。请参阅以下解决方案：

你的CSS：

table {
    word-wrap: normal;
    border-style: outset;
    border-width: 0px; 
    border-style: solid;
    border-color: rgb(75,75,75);
    margin-left: auto;
    margin-right: auto;
    color: black;
    width: 400px;
    font-family: verdana, arial, sans-serif;
    font-size: small;
    text-align: right;
    vertical-align: text-top;
    padding: 15px;
    border-radius:0px;
    background-color: rgb(256,256,256);
    position: relative;
}

#table-1 {
    box-shadow: 5px 0 5px 0 rgb(50,50,50);

}

#table-2 {
    box-shadow: 5px 5px 5px 0 rgb(50,50,50);
    z-index: 99;
}

您的HTML：

<table>
    <tr>
        <td>
            blah
        </td>
        <td>
            blah
        </td>
        <td>
            blah blah blah blah
        </td>
    </tr>
</table>
<table>
    <tr>
        <td>
            blah
        </td>
        <td>
            blah
        </td>
    </tr>
</table>

将两个表放在带有阴影的div内是更好的方法。这样可以确保右侧水平阴影之间没有间隙（见上例）。

相邻的桌子，正在投射的箱子阴影

4 个答案: