logo标签列表

父级div溢出会导致阴影框不显示

htmlcss
6
我有一个带有柔和的box-shadow的<table>，我想将其包装在<div>中，以便我可以使内容在x轴上溢出（实际表格很大，在小屏幕上需要这种效果）。
这很简单，但是当我在包装器<div>上添加CSS属性overflow-x：auto;时，box-shadow仍未正确显示（仅在较大的屏幕上才能看到右侧的阴影）。请参考此JSbin示例，其中第一个表格是正确的可视化，而第二个表格有故障。
如何在不删除溢出属性的情况下解决问题？
2
所以如果你添加了overflow，它会隐藏子元素的阴影。将阴影移到父元素上。 - Justinas
你为什么在这里使用 overflow？ - Praveen Kumar Purushothaman
@Justinas 给父元素设置了 width: 100%，但当它太大时就无法正常工作。@PraveenKumar 在小屏幕上，我想让表格左右滚动。尝试缩小浏览器窗口宽度以查看效果。 - Naigel
1
@Naigel 然后在父元素上添加与阴影相同大小的填充。 - Justinas
@Justinas 不错的想法！我可以在父级<div>中添加 padding: 5px; margin: -5px;！你能把它变成一个答案吗？ - Naigel
1个回答
10
您可以为父元素添加与阴影相同大小的填充。
2
小的补充，要去除添加的填充，请使用相同的填充值添加负边距。 例如 - padding: 1rem; margin: -1rem - Dinindu Kanchana
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接