用非背景颜色突出显示表格行

Posted 2023-03-06

【中文标题】用非背景颜色突出显示表格行

【英文标题】：Highlighting a table row with something other than background color

【发布时间】：2013-09-29 03:40:24

【问题描述】：

我正在尝试找到一种合理的 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 建议吗？

【参考方案1】：

将 html 更改为：

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

将 CSS 更改为：

#MyTable .tdContentWrapper:hover
  background: black;

【讨论】：

我想突出显示整行，而不是单个单元格。

【参考方案2】：

如何通过略微增加字体大小来增加内边距和/或行高？

该行足够明确地突出显示，而不会影响其对应同行的视觉样式；如果可能的话，我什至可能会根据交替的背景调整颜色。

【参考方案3】：

事实证明，您可以在 <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

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

但是，不可能使用普通（非插入）框阴影来做到这一点，因为它们会出现在表格单元格之间。