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

Question

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 :

enter image description here

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 ):

enter image description here

Question

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

jsbin

eeewwww.... I just thought of a solution ( ugly one) - z-index div transparent which will be on top of the column and will have the shadow...eeewww — Royi Namir, Jun 30 '14 at 15:10
I initially recommended using `` and ``, but it looks like it doesn't support `box-shadow`. — sir_thursday, Jun 30 '14 at 15:27

score 16 · Accepted Answer · edited May 23 '17 at 12:02

16

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.

edited May 23 '17 at 12:02

Community

1
1

answered Jun 30 '14 at 16:20

Linus

958
6
18

2

+1 though there's no need for jquery. Here's an updated CSS-only version: http://jsbin.com/zazasezuki/edit?html,css,output – Sep 27 '18 at 08:12

score 4 · Answer 2 · edited May 23 '17 at 11:54

4

Try something like this:

Your css class:

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

Giving a negative value in the fourth paramenter (-5px) you indicate the shadow spread. You can see something similar in this answer: How can I add a box-shadow on one side of an element?

edited May 23 '17 at 11:54

Community

1
1

answered Jun 30 '14 at 15:23

Diego

485
3
8

score 0 · Answer 3 · answered Jun 30 '14 at 15:44

You may use pseudo element and relative/absolute position to draw shadow and bg colors: http://jsbin.com/manacigi/17/edit

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

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

3 Answers3

Linked