Adjacent tables, box shadow being cast [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Hopefully this is a simple one:
I have 2 tables one over the other, but don't want the box shadows being cast on each other. Is there a way to resolve this? I've not had any luck with z-index.
I've included all my CSS code, just encase something there is relevant — 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

I'm not sure if this meets your needs but one option is to add a pseudo-element having a white background color to the 2nd, 3rd, ... tables — using adjacent sibling combinator + as table + table::after — in order to cover the shadow between tables.
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 2

A few ways to go outlined here:
1) just put it all in one table, but use <tbody> to separate things or use colspan to have different content,
2) use a pseudo class like table:last-child, or table:last-of-type or table:nth-child(x) - to differentiate and put a different drop shadow on the last table and then for the general drop shadow use a different one that just highlights the right side of the table, or
3) make a div wrapper to all the tables, put the drop shadow on that, remove the drop shadow on the tables.

Answer 3

You don't have this type of control over box-shadow. The best you can do is to change the shadow position for tables immediately preceded by another table:
table~table {
box-shadow: 5px 10px 15px rgb(50,50,50);
}
Please note that it does make the shadow a little different
https://jsfiddle.net/vk45mnb6/5/
Other possible solution is to have a wrapper div. You can then then apply the box-shadow to it:
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

You have to position the elements with relative to use z-index. With a box-shadow spread of 15, and two adjacent elements, you're going to have some overlap. If you reduce it to 5, the shadow doesn't overlap. See that solution below:
Your 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;
}
Your 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>
Putting both of the tables inside of a div with a shadow would be a better approach. This would ensure there isn't a gap between the horizontal shadow on the right side (seen in the example above).