除了第一個單元格外，在表格中添加了陰影框

我有一個簡單的表格，其中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 {}

這是完美的結果的圖像：

來源

2015-10-06 Darren Sweeney

第一個單元格意味着'class =「header」'？ –

如果'header'是你的表頭，你必須使用'的'代替''首先 –

細胞意味着第一小區與類行'header' –

這可能是通過給該單元格添加ID或類屬性，然後將css應用於其他元素，然後調用第一個單元格，如＃ firstCell並給它沒有背景：none;顏色：黑色;它通常的方式。

來源

2015-10-06 06:58:21 Derk

這完全是不正確的 - 我不想在每個''上都有影子 - 內心呢？ –

你應該tbody添加box-shadow和thead還添加box-shadow使用它，你可以排除，下面會更清楚你。

\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>

來源

2015-10-06 06:58:27

這裏根本沒有影子 –

查看更新的代碼，我希望它能幫助你。 –

這是我想通了，不完美，但確實

我改變第一小區到招足夠接近期望的結果：

<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

來源

2015-10-06 07:16:17

除了第一個單元格外，在表格中添加了陰影框

回答

相關問題