Inner shadow of the parent element on the child

Asked

Viewed 1,882 times

0

I need to make the inner shadow of the parent element over the child element. I have one div with overflow: scroll and a table inside which may be larger than this div. I’m making an inner shadow appear on this div on such a side where the contents of the table does not appear, so that the user knows that can roll the table. The problem is that the shadow of div does not stand on the table. Does anyone know how to solve?

css div table rolling

1 answer

3


Good. You didn’t 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 colour 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>

  • That’s what I had done. However, if the table has background, shadows do not appear.

  • @Marlonluís I get it. But what kind of background are you using? Color or image? Could add a transparency to the fund that would look cool, depending on your case?

  • The table has a color background, but cannot be transparent. Anyway, we agree that we will leave it the way it is for another reason, but if someone wants to solve the problem, it will help someone else. Thank you!

  • @Marlonluís Okay Marlon! Good luck there!

  • @Marlonluís I left an example with transparency, in case I help you with anything.

Browser other questions tagged css div table rolling

You are not signed in. Login or sign up in order to post.