可滚动表留下剩余边框答案

【问题标题】：Scrollable Table leaves residual border可滚动表留下剩余边框
【发布时间】：2021-04-04 08:24:07
【问题描述】：

我不确定这是 CSS/tailwind 错误还是我做错了什么，但我在使用 Tailwind 时观察到了这种行为。
滚动表格时，容器似乎在滚动前容器结束的位置留下了边框。

这发生在 Chrome 和 Firefox 上。

【问题讨论】：

【解决方案1】：

您将 .shadow 和 .rounded-md 分配给了错误的元素。您看到的是 div 的边框。

这是你的代码。

<div class="shadow rounded-md h-full">
  <table class="min-w-max sm:min-w-full divide-y divide-gray-200 text-sm p-4 h-full">

我从父 div 中删除了这些类并将其添加到表中。

<div class="h-full">
   <table class="shadow rounded-md min-w-max sm:min-w-full divide-y divide-gray-200 text-sm p-4 h-full">

【讨论】：

感谢您的回复！问题是带有阴影的 div 是 card react 组件的一部分。我可能应该在帖子中提到这一点，但我认为这并不重要。这一点的重要性是我不确定我是否可以在不破坏卡片组件整体美感的情况下移动阴影。我明天会玩，看看能做些什么。简单地看一下你的小提琴，我可以明白你对内部 div 宽度的意思。再次感谢您的回复。