使用除背景颜色之外的其他内容突出显示表格行

Question

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

这可能意味着使边框脱颖而出或对背景做一些不改变颜色的东西。我试过以下

• border: 2px ... margin: -2px或类似的东西。但是，它显示得不太好，特别是当桌子滚动时，并没有提供没有超厚边框的好亮点。浏览器对<tr>元素边框的支持也不是很好。
当包含该表的div可滚动时，
• outline: 3px ...似乎只显示在顶部和底部。
• box-shadow: 5px 5px ... color inset doesn't seem to display properly without messing up the table。

有没有人对如何实现这一点有任何好的CSS建议？

Answer 1

事实证明，你可以使用<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

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

但是，无法使用普通（非插入）框阴影执行此操作，因为它们会显示在表格单元格之间。

Answer 2

将HTML更改为：

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

将CSS更改为：

#MyTable .tdContentWrapper:hover{
  background: black;

}

Answer 3

如何通过逐渐增加字体大小来增加填充和/或行高？

该行得到足够明确的突出显示，而不会影响其相应对等体的视觉样式;如果可能的话，我甚至可以调整颜色，具体取决于交替的背景。