突出顯示與背景顏色以外的其他東西的表格行

我試圖找到一個合理的CSS樣式來突出顯示特定的表格行（即單擊選擇），不涉及更改背景顏色，因爲行顏色已經在我的申請中發揮了作用。突出顯示與背景顏色以外的其他東西的表格行

這可能意味着讓邊框脫穎而出，或者在不改變顏色的背景上進行操作。我試過以下

border: 2px ...與margin: -2px或類似的東西。但是，它不會顯示得太好，特別是在滾動表格時，如果沒有超厚邊框，不會提供高亮顯示。對<tr>元素的瀏覽器支持邊界也不是很好。
outline: 3px ...只有在包含表格的div可滾動時纔會顯示在頂部和底部。
box-shadow: 5px 5px ... color insetdoesn't seem to display properly without messing up the table。

有沒有人有如何實現這個好的CSS建議？

2013-09-24 Andrew Mao

更改HTML到：

<td style="padding:20px;"> 
    <div class="tdContentWrapper"> 
    <div>SomeStuff</div> 
    <div>SomeMoreStuff</div> 
    </div> 
</td>

更改CSS來：

#MyTable .tdContentWrapper:hover{ 
    background: black;

}

來源

2013-09-24 04:18:20

我想突出顯示整行，而不是單個單元格。 –

如何用字體的微妙的增加而增加的填充和/或行高-尺寸？

該行被足夠明確地突出顯示，而不會影響其對應對象的視覺樣式;我甚至可以調整顏色，如果可能的話，取決於交替的背景。

來源

2013-09-24 04:48:19

事實證明，您可以使用<td>元素上的css選擇器來做到這一點，小心兩端。例如，我創建了以下手寫筆代碼，可以將其轉換爲mixin。訣竅是使用負值spread來擺脫不希望出現在任何一邊的邊框，同時使用blur和水平/垂直值在您想要的邊上獲得良好效果。 blur必須至多爲spread的一半。

shadow-color = rgba(0,0,0,0.5) 
shadow = 15px 
-shadow = - shadow 
blur = 5px 
spread = -10px 

tr.selected > td 
    box-shadow: 
     0 shadow blur spread shadow-color inset, 
     0 -shadow blur spread shadow-color inset 

// Since we have to, make the top left and bottom right corners the dark overlapping ones 
tr.selected > td:first-child 
    box-shadow: 
     shadow -shadow blur spread shadow-color inset, 
     0 shadow blur spread shadow-color inset 

tr.selected > td:last-child 
    box-shadow: 
     0 -shadow blur spread shadow-color inset, 
     -shadow shadow blur spread shadow-color inset

這將創建類似下面的陰影邊界，允許任何背景顏色仍然顯示：

enter image description here

然而，它不可能與正常（非插圖）要做到這一點盒子陰影，因爲它們會出現在表格單元格之間。

來源

2013-09-24 05:46:27

突出顯示與背景顏色以外的其他東西的表格行

回答

相關問題