0
我有一個簡單的表格,其中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 {}
這是完美的結果的圖像:
第一個單元格意味着'class =「header」'? –
如果'header'是你的表頭,你必須使用'的'
細胞意味着第一小區與類行'header' –
回答
這可能是通過給該單元格添加ID或類屬性,然後將css應用於其他元素,然後調用第一個單元格,如# firstCell並給它沒有背景:none;顏色:黑色;它通常的方式。
來源
2015-10-06 06:58:21 Derk
這完全是不正確的 - 我不想在每個''上都有影子 - 內心呢? –
你應該
tbody
添加box-shadow
和thead
還添加box-shadow
使用它,你可以排除,下面會更清楚你。來源
2015-10-06 06:58:27
這裏根本沒有影子 –
查看更新的代碼,我希望它能幫助你。 –
這是我想通了,不完美,但確實
我改變第一小區到招足夠接近期望的結果:
CSS:
You can see it here
來源
2015-10-06 07:16:17
相關問題