Прилегающих столов, коробка тени быть брошенным

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

Я не уверен, если это отвечает вашим потребностям, но один из вариантов является добавление псевдо -элемент, имеющий белый цвет фона для 2nd, 3rd, ...table 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 2

Несколько способов идти описано здесь:

1) просто положить все это в одной таблице, но использовать <tbody> отделить вещи или использовать Colspan иметь разное содержание,

2) используйте псевдокласс как таблица: последний-ребенок или таблица: последний или тип: nth-child (x) - чтобы различать и помещать другую тень на последнюю таблицу, а затем для общее падение s hadow использовать другой, который просто выделяет правую сторону стола, или

3) сделайте обертку div для всех таблиц, наложите на нее тени тени, удалите тени из таблиц.

Answer 3

У вас нет такого типа контроля над теневой коробкой. Лучшее, что вы можете сделать, это изменить положение тени для таблиц непосредственно предшествует другой таблице:

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 4

Вы должны расположить элементы с relative использовать 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 с тенью будет лучшим подходом. Это обеспечило бы отсутствие разрыва между горизонтальной тенью с правой стороны (см. Пример выше).