1

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

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

  • border: 2px ...有margin: -2px或类似的东西。但是，它的显示效果不太好，尤其是在表格滚动时，并且在没有超厚边框的情况下无法提供良好的高亮显示。浏览器对<tr>元素边框的支持也不是很好。
  • outline: 3px ...只有当包含表格的 div 可滚动时，才会显示在顶部和底部。
  • box-shadow: 5px 5px ... color inset 在不弄乱表格的情况下似乎无法正确显示。

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

4

3 回答 3

2

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

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

在此处输入图像描述

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

于 2013-09-24T05:46:27.447 回答
0

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

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

于 2013-09-24T04:48:19.203 回答
0

将 HTML 更改为：

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

将 CSS 更改为：

#MyTable .tdContentWrapper:hover{
  background: black;

}

于 2013-09-24T04:18:20.870 回答