Add box-shadow field to column (top to bottom)?

Question

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

I have no problems with colors or html, but I have a problem with box-shadowcss property .

Here's how it should look:

Please note: "right-shadow"and "left-shadow"(below - I don't care)

But when I tried to do this ( JSBIN SAMPLE ) via JQ:

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

Where:

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

He applies it to all borders (as is obvious) (including inside):

Question

How can I reach a solution where only left and right (I don’t care at the bottom) will be obscured?

jsbin

Answer 1

jsFiddle, : before : after, .

, CSS- , , .

Answer 2

- :

css:

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

(-5px), . - : ?

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;
}