将box-shadow添加到表格列（从上到下）？ [英] Add box-shadow to table column (top to bottom)?

问题描述

我有这个简单的表格，如果我点击一列 - 我需要将整个选定列（从顶部到按钮）选中。

我没有颜色或html的问题，但我确实遇到了 box-shadow css属性的问题。

这是它的外观：

请注意right-shadow和left-shadow（底部 - 我不在乎）

但是当我试图制作它时（

解决方案

我更新了 jsFiddle ，以使用带有：before和：after元素的inset-box-shadow作为显示在这个出色的解决方案中。

我认为这是最好的为你的问题寻找仅限css的解决方案，大多数其他黑客都有非常圆的阴影，看起来很奇怪。

I have this simple table where if I click on a column - I need to make the whole chosen column ( from top to buttom ) as selected.

I don't have a problem with colors or html , but I do have a problem with the box-shadow css property.

This is how it should look :

Please notice "right-shadow" and "left-shadow" (bottom- I don't care)

But When I tried to make it ( JSBIN SAMPLE) via JQ :

$("#tblPlan td:nth-child(2)").addClass('shadow')

Where :

.shadow
{
    box-shadow:0px 0px 10px  black;
}

It applies it to all borders ( As it should obviously ) (including inside ):

Question

How can I achieve to a solution where only left and right ( bottom I don't care) - will be shadowed ?

jsbin

解决方案

I updated the jsFiddle to use a inset-box-shadow with :before and :after elements, as shown in this great solution.

I think it's the best looking css-only solution for your problem, most other hacks have very round shadows, which looks odd.

这篇关于将box-shadow添加到表格列（从上到下）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！