<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 8 年前。
标签 html css html-table
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 8 年前。
希望这是一个简单的:
我有 2 个 table ，一个放在另一个上面，但不希望盒子阴影相互转换。有办法解决这个问题吗？我在 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>最佳答案
我不确定这是否满足您的需求，但一种选择是向 2nd, 3rd, ... 添加一个具有白色背景颜色的伪元素 table s — 使用 adjacent sibling combinator +作为table + table::after — 为了遮盖表格之间的阴影。
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;
}
关于html - 相邻的表，正在转换框阴影，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29305777/