将box-shadow添加到表格列（从上到下）？

Question

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

我对颜色或html没有问题，但我对box-shadow css属性有疑问。

这应该是它的样子：

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

但是当我试图通过JQ（<{3}}）时，它通过JQ：

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

其中：

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

它将它应用于所有边界（因为它显然应该）（包括内部）：

问题

如何才能实现仅左右（底部我不在乎）的解决方案 - 将被遮蔽？

JSBIN SAMPLE

Answer 1

我更新了jsFiddle以使用inset-box-shadow和：before和：after元素，如this great solution所示。

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

Answer 2

尝试这样的事情：

您的css课程：

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

在第四个参数（-5px）中给出负值，表示阴影扩散。 您可以在此答案中看到类似的内容：How can I add a box-shadow on one side of an element?

Answer 3

您可以使用伪元素和相对/绝对位置来绘制阴影和bg颜色：http://jsbin.com/manacigi/17/edit

更新了css：

        #tblPlan
        {

        table-layout: fixed;
         width:100%;
        border-collapse: collapse;
        border:solid 1px lightgrey;
          position:relative;
          overflow:hidden;

        }

        #tblPlan tr:first-child td+td
        {
        white-space: nowrap;
        }



        #tblPlan td:first-child
        {
             padding-left:20px;
        }
        #tblPlan td
        {border:solid 1px lightgrey;

        padding:15px 5px 15px 5px;
        }

        #tblPlan td+ td
        { 
        text-align: center;
        }




        .shadow
        {
          box-shadow:inset 0 0 0 100px #5FCBE5;
          position:relative;

        }
.shadow:before,
.shadow:after {
  content:'';
  position:absolute;
  height:100%;
  top:0;
  bottom:0;
  width:1px;
  box-shadow:-2px 0 2px;
}
.shadow:before {
    left:0;
}
.shadow:after {
  right:0;
    box-shadow:2px 0 2px;
}