Inner shadow of the parent element on the child

Navigation
0

I need to make the inner shadow of the parent element over the child element. I have a div with overflow: scroll and a table inside it that can be larger than this div . I'm causing an inner shadow to appear in this div on that side where table does not appear, so the user knows that table can roll. The problem is that the shadow of div does not stay over table . Does anyone know how to solve it?

    
asked by anonymous 28.04.2017 / 13:47

1 answer

1

Good. You did not pass any code, so I created this quick example. See if it solves your situation. 

div {
  width: 500px;
  height: 100px;
  overflow: scroll;
  box-shadow: inset -30px -30px 30px 0px #000;
}

table {
  width: 400px;
  height: 100px;
}
<div>
  <table>
    <tr>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
    </tr>
    <tr>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
    </tr>
    <tr>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
    </tr>
    <tr>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
    </tr>
    <tr>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
    </tr>
    <tr>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
    </tr>
    <tr>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
    </tr>
  </table>
</div>

EDIT

With color and transparency: 

div {
  width: 500px;
  height: 100px;
  overflow: scroll;
  box-shadow: inset -30px -30px 30px 0px #000;
}

table {
  width: 400px;
  height: 100px;
  background: rgba(0, 151, 167, 0.5);
}
<div>
  <table>
    <tr>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
    </tr>
    <tr>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
    </tr>
    <tr>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
    </tr>
    <tr>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
    </tr>
    <tr>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
    </tr>
    <tr>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
    </tr>
    <tr>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
      <td>UIAHBUIABHAUIBAIUIABAUI</td>
    </tr>
  </table>
</div>
    
28.04.2017 / 19:11
How do I get id of a category using the return of the category name of the Wordpress function single_cat_title (); How to calculate the distance between two points and calculate distance ABC, CAB, BAC? in C