如何防止插入阴影在滚动时消失

Question

我想在桌子上显示一个插入的阴影。 问题是它在滚动时消失了。 滚动时有没有办法防止它消失？

从上图中可以看出，只有没有表格才会显示阴影。影子似乎落在了桌子后面

＆＃13;

＆＃13;

table {
  display: inline-block;
  font-family: arial, sans-serif;
  border-collapse: collapse;
  /*border-top: solid 5px;*/
  width: 500px;
  height: 200px;
  overflow: auto;
  -webkit-box-shadow: inset 0px 1px 5px 0px rgba(148, 148, 148, 1);
  -moz-box-shadow: inset 0px 1px 5px 0px rgba(148, 148, 148, 1);
  box-shadow: inset 0px 1px 5px 0px rgba(148, 148, 148, 1);
}

td,
th {
  border: 1px solid #cacaca;
  text-align: left;
  padding: 8px;
  background-color: #f5f5f5;
}

th {
  background-color: #dce0e3;
}

＆＃13;

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tbody>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Laughing Bacchus </td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari </td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要将阴影添加到包含可滚动区域的包装器以保留它。

.wrapper {
  box-shadow: inset 0 2px 2px silver;
}

.scrollable {
  overflow-y: scroll;
  height: 250px;
}

.content {
  height: 1000px;
}

<div class="wrapper">
  <div class="scrollable">
    <div class="content"></div>
  </div>
</div>

Answer 2

由于你不能在桌子上放一个盒子阴影，我提出了两个有点hacky的解决方案！

解决方案1 ​​：放入th

＆＃13;

＆＃13;

table {
  display: inline-block;
  font-family: arial, sans-serif;
  border-collapse: collapse;
  /*border-top: solid 5px;*/
  width: 500px;
  height: 200px;
  overflow: auto;
}

td,
th {
  border: 1px solid #cacaca;
  text-align: left;
  padding: 8px;
  background-color: #f5f5f5;
}

th {
  -webkit-box-shadow: inset 0px 5px 5px -5px rgba(148, 148, 148, 1);
  -moz-box-shadow: inset 0px 5px 5px -5px rgba(148, 148, 148, 1);
  box-shadow: inset 0px 5px 5px -5px rgba(148, 148, 148, 1);
  background-color: #dce0e3;
}

＆＃13;

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tbody>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Laughing Bacchus </td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari </td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

解决方案2 ：将其置于浮动的div

上

＆＃13;

＆＃13;

table {
  display: inline-block;
  font-family: arial, sans-serif;
  border-collapse: collapse;
  /*border-top: solid 5px;*/
  width: 500px;
  height: 200px;
  overflow: auto;
}

.shadow {
  position: absolute;
  width: 500px;
  height: 10px;
  -webkit-box-shadow: inset 0px 5px 5px -5px rgba(148, 148, 148, 1);
  -moz-box-shadow: inset 0px 5px 5px -5px rgba(148, 148, 148, 1);
  box-shadow: inset 0px 5px 5px -5px rgba(148, 148, 148, 1);
}

td,
th {
  border: 1px solid #cacaca;
  text-align: left;
  padding: 8px;
  background-color: #f5f5f5;
}

th {
  background-color: #dce0e3;
}

＆＃13;

<div class=shadow></div>
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tbody>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Laughing Bacchus </td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari </td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;