css - 内容滚动时框阴影不正确

Question

我有一些关于盒子阴影的内容，它是可滚动的，当滚动超出当前宽度时，就没有阴影了。现在在下面的代码片段中，如果您向右滚动，您会看到表格标题上没有三个框阴影的时刻。

.table{
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  overflow-y: hidden;
}

.table-header{
  display: flex;
  width: 100%;
  height: 70px;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5);
  z-index: 1;

}

.table-column{
  border-left:2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  flex: 0 0 400px;
  color: #fff;
  background: #227391;
}

.table-body{
  display: flex;
  width: 100%;
  min-height: 200px;
}

.table-body .table-column{
  background: #eee;
  color: #2d2d2d;
}

<div class="table">
  
  <div class="table-header">
    <div class="table-column">Number</div>
    <div class="table-column">Status</div>
    <div class="table-column">Posiiton</div>
  </div>
  
  <div class="table-body">
    <div class="table-column">2</div>
    <div class="table-column">Send</div>
    <div class="table-column">1</div>
    
  </div>
  
</div>

Answer 1

在这种情况下，将阴影应用于子元素。

.table {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  overflow-y: hidden;
}

.table-header {
  display: flex;
  width: 100%;
  height: 70px;
  z-index: 1;
}

.table-column.shadow {
  box-shadow: 4px 2px 2px 0 rgba(0, 0, 0, 0.5);
}

.table-column {
  border-left: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  flex: 0 0 400px;
  color: #fff;
  background: #227391;
}

.table-body {
  display: flex;
  width: 100%;
  min-height: 200px;
}

.table-body .table-column {
  background: #eee;
  color: #2d2d2d;
}

<div class="table">

  <div class="table-header">
    <div class="table-column shadow">Number</div>
    <div class="table-column shadow">Status</div>
    <div class="table-column shadow">Posiiton</div>
  </div>

  <div class="table-body">
    <div class="table-column">2</div>
    <div class="table-column">Send</div>
    <div class="table-column">1</div>

  </div>

</div>