CODEWITHSUNDEEP
htmlcss
Shelef tavor
Shelef tavor

Reputation: 49

add box-shadow to table's overflow point

I have a table, and I want to add a box shadow to the place where the table starts to overflow, on the right side. tried adding box-shadow to table and it didn't work.

Help will be much appreciated.

my code: JSFiddle

my css:

#res_table
  {
    border-collapse: separate;
    border-spacing: 4vw 4vh;
    font-family: 'Heebo-Light'; 
    display: block;
    overflow-x: scroll;
    white-space: nowrap;
  }
  #table_wrapper
  {
    position: absolute;

    width: 20vw; 
    height: 80vh;
    overflow-y: visible;
    justify-content:center;
    font-size: 2.5vh;
    margin-left: 10vw;
  }
  #res_table td, th
  {
    text-align: center;
    white-space: nowrap;
    border-top-width: 0px;
  }
  #res_table td > div
  {
    height: 7vh;
    line-height: 7vh;
  }
  #res_table tr
  {
    box-shadow: 0 0 2vw 0 rgba(0, 0, 0, 0.2);
  }
  .cancel_res
  {
    position: fixed;
    overflow-x: hidden;
    width: 15vw;
    margin-left: 2vw;
    font-size: 2vh;
    box-shadow: 0 0 1vw  grey;
    border-radius: 2vh;
    margin-top: 2vh;
  }
  #res_table td.cancel_res > div 
  {
    height: 3vh;
    line-height: 3vh;
    
  }

Upvotes: 0

Views: 368

Answers (1)

Shelef tavor
Shelef tavor

Reputation: 49

I've solved the problem. Just added the box-shadow to the parent div of the table and it worked.

Silly me...

Upvotes: 1

Related Questions