突出显示非背景颜色的表格行 [英] Highlighting a table row with something other than background color

问题描述

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

这可能意味着让边框脱颖而出，或者做一些不改变颜色的背景。我已尝试下列

• border：2px ... c $ c> margin：-2px 或类似的东西。但是，它不显示太好，特别是当表滚动时，并没有提供一个很好的亮点没有超厚边框。浏览器支持< tr> 元素的边框也不是很好。


• outline：3px。


• 只有在顶部和底部才会显示
c：box-shadow：5px 5px ... color inset 似乎无法正确显示，而不会弄乱表格。 / li>

有没有任何人有任何良好的CSS建议如何实现？

解决方案

事实证明，你可以使用css选择器在< td> 元素，小心两端。例如，我创建了以下手写笔代码，可以将其转换为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阴影模糊扩散阴影颜色插入，
 0阴影模糊扩散阴影颜色插入
 
 //因为我们必须，使左上角和右下角的黑暗重叠的
 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 
  

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

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

I'm trying to find a reasonable CSS style for highlighting a particular table row (i.e. on a click selection) that doesn't involve changing the background color, because the row colors already serve a purpose in my application.

This probably means making the border stand out or doing something to the background that doesn't change its color. I've tried the following

• border: 2px ... with margin: -2px or something like that. However, it doesn't display too well, especially when the table is scrolling, and doesn't offer a good highlight without a super thick border. Browser support of borders on <tr> elements also isn't great.
• outline: 3px ... only seems to display on the top and bottom when the div containing the table is scrollable.
• box-shadow: 5px 5px ... color inset doesn't seem to display properly without messing up the table.

Does anyone have any good CSS suggestions for how to achieve this?

解决方案

It turns out that you can do this using css selectors on the <td> elements, being careful with the two ends. For example, I created the following stylus code, which could be turned into a mixin. The trick is to use a negative spread value to get rid of the borders that would show up on any side you don't want, while using the blur and horizontal/vertical values to get the nice effect on the sides you do want. The blur must be at most half the 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

This creates a shadow border like the following, allowing any background color to still show up:

However, it's not possible to do this with normal (non-inset) box-shadows because they will show up in between the table cells.

这篇关于突出显示非背景颜色的表格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！