Добавить поле тени в таблицу, кроме первой ячейки

Question

У меня есть простая таблица с box-shadow, но я хочу исключить самую первую ячейку из любой тени.

Я попытался добавить box-shadow: none в эту ячейку, но не перекрывает тень на всей таблице. Я даже не уверен, что это возможно?

HTML:

<table> 
    <tr class="header"> 
     <td></td> 
     <td>hello</td> 
     <td>hello</td> 
     <td>hello</td> 
    </tr> 
    <tr> 
     <td>row 1</td> 
     <td>row 1</td> 
     <td>row 1</td> 
     <td>row 1</td> 
    </tr> 
    <tr> 
     <td>row 2</td> 
     <td>row 2</td> 
     <td>row 2</td> 
     <td>row 2</td> 
    </tr> 
    <tr class="last-row"> 
     <td>row 3</td> 
     <td>row 3</td> 
     <td>row 3</td> 
     <td>row 3</td> 
    </tr> 
</table>  

CSS:

table { 
    width: 80%; 
    margin: 30px; 
    box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12); 
} 
.header { 
    height: 50px; 
    vertical-align: middle; 
    text-align: center; 
    color: #fff; 
    background: red; 
} 
.header td { 
    border-bottom: 2px solid #ccc; 
} 
.header td:first-of-type { 
    background: #fff; 
} 
.last-row td { 
    border: none !important; 
} 
tr td:not(.header) { 
    height: 60px; 
    text-align: center; 
    border-bottom: 1px solid #ccc; 
} 

Here's a fiddle to show an example of a table

Возможно ли это?

UPDATE

К первой ячейке я имею в виду первую ячейку в строке с классом header - table .header td {}

Это образ идеального результата:

Answer 1

Это может быть сделав, предоставив этой ячейке либо идентификатор, либо атрибут класса, затем примените css по своему вкусу к элементам al td, а затем вызовите первую ячейку, например # firstCell и не дайте ему фона: none; черный цвет; как обычно.

Answer 2

Вы должны добавить box-shadow в tbody и добавить box-shadow в thead также использовать его можно исключить, что ниже будет ясно вам больше.

\t table { 
 
    width: 80%; 
 
    margin: 30px; 
 
    overflow: hidden;padding: 5px; 
 
    
 
} 
 
.header { 
 
    height: 50px; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    color: #fff; 
 
    background: red; 
 
} 
 
.header td { 
 
    border-bottom: 2px solid #ccc; 
 
} 
 
.header th:first-of-type { 
 
    background: #fff; 
 
} 
 
.last-row td { 
 
    border: none !important; 
 
} 
 
tr td:not(.header) { 
 
    height: 60px; 
 
    text-align: center; 
 
    border-bottom: 1px solid #ccc; 
 
} 
 
table tbody{ 
 
\t box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12); 
 
} 
 
table thead{ 
 
\t position: relative; 
 
} 
 
table thead:before{ 
 
    box-shadow: 3px -2px 2px rgba(0, 0, 0, 0.2); 
 
    content: ""; 
 
    height: 109%; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    width: 75%; 
 
    z-index: -1; 
 
}

<table> 
 
\t <thead> 
 
\t  <tr class="header"> 
 
\t   <th></th> 
 
\t   <th>hello</th> 
 
\t   <th>hello</th> 
 
\t   <th>hello</th> 
 
\t  </tr> 
 
    </thead> 
 
    <tbody> 
 
\t  <tr> 
 
\t   <td>row 1</td> 
 
\t   <td>row 1</td> 
 
\t   <td>row 1</td> 
 
\t   <td>row 1</td> 
 
\t  </tr> 
 
\t  <tr> 
 
\t   <td>row 2</td> 
 
\t   <td>row 2</td> 
 
\t   <td>row 2</td> 
 
\t   <td>row 2</td> 
 
\t  </tr> 
 
\t  <tr class="last-row"> 
 
\t   <td>row 3</td> 
 
\t   <td>row 3</td> 
 
\t   <td>row 3</td> 
 
\t   <td>row 3</td> 
 
\t  </tr> 
 
    </tbody>  
 
</table>

Answer 3

Это то, что я понял, не идеально, но делает это достаточно близко к желаемому результату

Я изменил первую ячейку:

<td style="position: relative"><div class="overflow"></div></td> 

CSS:

.overflow{ 
    position: absolute; 
    background: #fff; 
    bottom: 0; 
    right: 0; 
    width: 105%; 
    height: 105%; 
} 

You can see it here