[SOLVED] How to remove the box shadow from table?

How to remove the box shadow from table?

Got a query that I've been struggling with. I want to remove the shadow from my ng-tables when I hover over them, I was wondering how this is achieved: http://prntscr.com/jcpl5g

widget-body {
background-color: #fbfbfb;
-webkit-box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
padding: 12px; }

I've looked online for examples already but each time I've tried, it seems to remove the actual model but keep the shadow. Any help would be great!

Solution

How ever your question dosen't have any link of real example or code but from your question as you stated that on hover you get the shadow and you want to remove that shadow.

So simply use the firebug or any other developer tool and find the class or style which is applied during the hove from your CSS code it is not clear that widget-body is a class or id. I am assuming that widget-body is a class . You also have to set the browser specific box-shadow code like -webkit-box-shadow and -moz-box-shadow to none;

In that class simply set the box-shadow: none; or you can simply remove the whole property called box-shadow as per your need and same for -webkit-box-shadow and -moz-box-shadow. Your final code look like this

.widget-body {
    background-color: #fbfbfb;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    padding: 12px; 
 }

NOTE: Kindly check that .widget-body class is not used by any other element in the website if that is the case then you have to create a new class and have to override the .widget-body class properties by !important keyword in that class otherwise shadow will disappear from website :)

You can also use the :hover pseudo-class

I hope this will help.