Css 使用背景色以外的颜色高亮显示表格行

我试图找到一种合理的CSS样式来突出显示特定的表行（即单击选择），而不涉及更改背景颜色，因为行颜色在我的应用程序中已经起到了作用

这可能意味着使边框突出或对背景做一些不改变其颜色的操作。我试过以下方法

• border:2px…

  带有

  margin:-2px

  或类似内容。但是，它的显示效果不太好，尤其是当表格滚动时，如果没有超厚的边框，就无法提供良好的高光效果。浏览器对
  元素边框的支持也不是很好

• outline:3px…

  仅当包含表格的div可滚动时，才会显示在顶部和底部

• box阴影：5px 5px。。。颜色插图

有人对如何实现这一点有什么好的CSS建议吗？

将HTML更改为：

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

---

}

如何通过稍微增加字体大小来增加填充和/或行高

---

在不影响对应行的视觉样式的情况下，该行被足够明确地高亮显示；如果可能的话，我甚至可以根据交替的背景来调整颜色。

事实证明，您可以使用

元素上的css选择器来实现这一点，但要注意两端。例如，我创建了以下手写笔代码，可以将其转换为mixin。诀窍是使用一个负的

spread

值来去除不希望出现在任何一侧的边界，同时使用

blur

和水平/垂直值来在希望出现的一侧获得良好的效果。

blur

最多必须是

排列的一半

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

这将创建如下所示的阴影边框，允许任何背景颜色仍然显示：


但是，正常（非插入）框阴影不可能这样做，因为它们将显示在表格单元格之间。
我想突出显示整行，而不是单个单元格。
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