Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 377
Royi Namir Avatar asked Jun 30 '14 15:06

Royi Namir


People also ask

How do you put box shadow on top and bottom only?

The following example shows how to set Box-Shadow so that it will only show a shadow for the inset top and bottom of an element. The key to accomplishing this is to set the blur value to <= the negative of the spread value (ex. inset 0px 5px -?

How do you box shadow only the bottom?

Use the box-shadow Property to Set the Bottom Box Shadow in CSS. We can use the box-shadow property to set the shadow only at the bottom of the box. The box-shadow property sets the shadow of the selected element.


2 Answers

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.

like image 80
Linus Avatar answered Oct 03 '22 18:10

Linus


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?

like image 43
Diego Avatar answered Oct 03 '22 18:10

Diego