相邻的表，正在投射框阴影

Question

希望这是一个简单的：

我有 2 个桌子，一个放在另一个上面，但不希望盒子阴影相互投射。有办法解决这个问题吗？ z-index.

我运气不好

我已经包含了我所有的 CSS 代码，只包含相关的东西 — Example.

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);
}

<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>

Answer 1

这里列出了一些方法：

1) 将它们全部放在一个 table 中，但使用 <tbody> 来分隔事物或使用 colspan 来具有不同的内容，

2) 使用伪 class 像 table:last-child，或 table:last-of-type 或 table:nth-child(x) - 来区分和放置在最后一个 table 上使用不同的投影，然后为一般投影使用不同的投影，只突出显示 table 或

的右侧

3) 为所有 table 制作一个 div 包装器，在其上放置投影，移除 table 上的投影。

Answer 2

您没有这种对框阴影的控制。你能做的最好的事情就是改变 tables 的阴影位置，紧接着另一个 table:

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 3

我不确定这是否满足您的需求，但一种选择是向 2、3、... 添加一个具有白色背景颜色的伪元素=11=]s — 使用 adjacent sibling combinator + 作为 table + table::after — 为了覆盖表之间的阴影。

Example Here

table {
    /* other declarations... */
    padding: 15px;
    background-color: white;
    box-shadow: 5px 5px 15px rgb(50,50,50);
    position: relative;
}

table + table::after { /* to target adjacent table elements */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 10px;
    background-color: white;
    z-index: 10;
}

Answer 4

您必须使用 relative 定位元素才能使用 z-index。使用 15 的 box-shadow spread 和两个相邻的元素，您将有一些重叠。如果将其减少到 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 内并带有阴影会是更好的方法。这将确保右侧的水平阴影之间没有间隙（如上例所示）。

相邻的表，正在投射框阴影

Adjacent tables, box shadow being cast

html

css

html-table