bottom shadow of row is not displaying when hovered over row?

Question

I have used datatable,

when i hovered over row bottom shadow is not displaying , why? only right and left shadow is displayed.

  table.dataTable tbody tr:hover {
                    
                   background-color: #fbfbfb; box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.5); cursor: pointer; 
                   border-bottom:double;
                }

enter image description here

I think it is because you are applying the shadow in the `tr` and the shadow is behind the next `tr`. Do you get the same result if you hover in the last `tr` you have? — Julio Suriano, Jul 31 '20 at 13:57
haha tr must be linline then, so just set it to display:block; — Tilak Madichetti, Jul 31 '20 at 14:00
@Julio, in the last row , i can see shadow, but not in middle of row — pratik, Jul 31 '20 at 14:04
Does this answer your question? [Box Shadow on table row not appearing on certain browsers](https://stackoverflow.com/questions/10874985/box-shadow-on-table-row-not-appearing-on-certain-browsers) — ChewySalmon, Jul 31 '20 at 14:04
I've created a codepen as an example using your code and the answer supplied above. View [here](https://codepen.io/brayden-merrifield/pen/gOPVrwr) — ChewySalmon, Jul 31 '20 at 14:09

score 0 · Answer 1 · answered Jul 31 '20 at 14:22

0

Try positioning the rows relative, setting the display to block and setting the z-index in tr:hover to bring the current table row to the front.
E.g.:

table tbody tr:hover {
background-color:#13326b;
color:#ffffff;
text-shadow: 1px 2px #000000;
box-shadow: 0px 0px 10px #ff0000;
-webkit-box-shadow: 0px 0px 10px #ff0000;
-moz-box-shadow: 0px 0px 10px #ff0000;
z-index:100;
}
td, th { padding-left: 16px; min-width: 170px;  text-align: left; }
table tbody tr , table tbody td{
    height:100px;
}
tr{
  display: block;
  position:relative;
  background-color:#fff;
}

answered Jul 31 '20 at 14:22

Sebastian

1
1

i got shadow but , ui is disguised – pratik Jul 31 '20 at 14:45
@pratik Try setting the z-Index of the ui to a greater value than the tr:hover z-index – Sebastian Jul 31 '20 at 16:06

score 0 · Answer 2 · answered Jul 31 '20 at 14:26

0

enter image description here

 table.dataTable { 
  box-sizing: border-box; 
}

 table.dataTable td, th { 
  width:100%
}

  table.dataTable tr {
  display: block; 

}
   table.dataTable tr:hover {     
  position: relative; 
  background-color: orange;  
  cursor: pointer; 
  box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.5); 
  cursor: pointer; 
}

i got shadow using above code but, ui is disguised.

answered Jul 31 '20 at 14:26

pratik

1
2

@ChewySalmon , i have used above code , i got shadow but ui id disguised – pratik Jul 31 '20 at 14:30

bottom shadow of row is not displaying when hovered over row?

2 Answers2