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

希望这是一个简单的例子：

我有两张桌子，一张在另一张上面，但我不想让盒子的阴影相互投射。有办法解决这个问题吗？我在

z-index

方面运气不好

我已经包括了我所有的CSS代码，只是封装了一些相关的东西-

html{
溢出：-moz滚动条垂直；
溢出y：滚动；
}
身体{
颜色：rgb（000000000）；
背景：rgb（256256）；
背景：webkit线性梯度（rgb（42109142），rgb（111197228））；
背景：莫兹线性梯度（rgb（42109142），rgb（111197228））；
背景：线性梯度（rgb（42109142），rgb（111197228））；
高度：800px；
背景重复：无重复；
背景色：rgb（111197228）；
字体系列：verdana、arial、无衬线字体；
字体大小：小；
}
桌子{
换字：正常；
边界样式：开始；
边框宽度：0px；
边框样式：实心；
边框颜色：rgb（75,75,75）；
左边距：自动；
右边距：自动；
颜色：黑色；
宽度：400px；
字体系列：verdana、arial、无衬线字体；
字体大小：小；
文本对齐：右对齐；
垂直对齐：文本顶部；
填充：15px；
边界半径：0px；
背景色：rgb（256256）；
盒影：5px 5px 15px rgb（50,50,50）；
}
tr{
边框：实心；
边框宽度：2px0；
}
表tr:N个孩子（奇数）td{
背景色：rgb（202233244）；
垂直对齐：文本顶部；
}
表tr:n个孩子（偶数）td{
背景色：rgb（80183222）；
垂直对齐：文本顶部；
}
tr：第一个孩子{
边界顶部：无；
}
tr：最后一个孩子{
边框底部：无；
}
th{
空白：nowrap；
文本对齐：居中；
颜色：rgb（20,85109）；
}

废话
废话
废话废话
废话
废话

这里概述了一些方法：

1） 只需将所有内容放在一个表中，但使用

来分隔内容或使用colspan来具有不同的内容

2） 使用伪类，如table:last child或table:last of type或table:nth child（x）-区分并在最后一个表上放置不同的放置阴影，然后对于常规放置阴影，使用仅高亮显示表右侧的不同放置阴影，或

---

3） 为所有表创建一个div包装器，在其上放置放置放置阴影，然后删除表上的放置阴影。

您对框阴影没有这种类型的控制。最好是更改紧跟在另一个表之前的表的阴影位置：

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

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

另一种可能的解决方案是使用包装器div。然后，您可以对其应用框阴影：

HTML

---

我不确定这是否满足您的需要，但有一个选项是在第二、第三、

表

s中添加一个具有白色背景色的伪元素-使用

+

as

table+table:：after

-以覆盖表之间的阴影

表格{
/*其他声明*/
填充：15px；
背景色：白色；
盒影：5px 5px 15px rgb（50,50,50）；
位置：相对位置；
}
table+table：：在{/*之后以相邻的表元素为目标*/
内容：“；
位置：绝对位置；
左：0；
右：0；
底部：100%；
高度：10px；
背景色：白色；
z指数：10；
}

您必须使用

相对

来定位元素，才能使用z索引。如果长方体阴影扩展为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

中是更好的方法。这将确保右侧的水平阴影（如上图所示）之间没有间隙。

您试图实现什么，您是否尝试在第二张表上使用边距顶部？它看起来像是下一张表我认为

table~ table:：after

效果更好<代码>：非（：类型的第一个）可以在中选择第二个表格：

分隔两个表格

@Andre Ah。。谢谢，我真不敢相信我错过了！太好了，非常感谢！

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

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