-1

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>

2
  • What are you trying to achieve, have you tried using margin-top on the second table?
    – Konrud
    Mar 27, 2015 at 16:41
  • It look like tables one below the other
    – vitdes
    Mar 27, 2015 at 16:43

4 Answers 4

2

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;
}
2
  • I think table~table::after works better. :not(:first-of-type) may select the second table in: <table></table> <div> separates two tables</div> <table></table>
    – Ortiga
    Mar 27, 2015 at 17:05
  • @Andre Ah.. thank you, I can't believe it that I missed it! Mar 27, 2015 at 17:09
1

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.

1

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

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.