如何为表格右侧溢出起始位置添加box-shadow，直接给table添加不生效

问题原因 #

你给table添加box-shadow不生效的核心原因如下：

• 你的#res_table设置了display: block + overflow-x: scroll，阴影属于元素外部绘制区域，会被滚动容器的overflow属性直接裁剪，无法正常显示
• 你当前代码里的阴影是加在tr元素上的，属于每行的独立阴影，无法实现表格右侧溢出位置的边缘提示阴影效果

解决方法 #

不需要修改HTML结构，仅调整CSS即可实现横向滚动时右侧常驻阴影的效果，修改和新增的CSS代码如下：

/* 给外层容器#table_wrapper新增定位和溢出隐藏属性 */
#table_wrapper
{
  position: absolute;
  width: 20vw; 
  height: 80vh;
  overflow-y: visible;
  justify-content:center;
  font-size: 2.5vh;
  margin-left: 10vw;
  /* 新增内容 */
  position: relative;
  overflow: hidden;
}

/* 新增伪元素实现右侧滚动边缘阴影 */
#table_wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 2vw;
  box-shadow: inset -2vw 0 2vw -2vw rgba(0, 0, 0, 0.2);
  pointer-events: none;
  z-index: 10;
}

/* 如果需要table整体的外阴影，直接加在#table_wrapper上即可，不要加在table元素上 */
#table_wrapper {
  box-shadow: 0 0 2vw 0 rgba(0, 0, 0, 0.2);
}

调整完成后，只要表格内容超出容器宽度出现横向滚动条，右侧就会一直显示阴影提示存在未展示的内容，同时不会影响表格的滚动、点击等交互操作。

内容的提问来源于stack exchange，提问作者Shelef tavor