如何对带有边框的表应用圆角和阴影？

Question

阴影似乎确实有效，但前提是您使用一些非常大的阴影。你不能使用一个小的。有人知道为什么吗？

谈到圆角时，几乎不可能在桌子周围有边框。

这就是我所拥有的； https://codepen.io/anon/pen/jJwyrW

<div class="flex flex-row items-center min-h-screen">
  <table class="w-full max-w-xl mx-auto bg-grey-lightest border border-grey shadow-sm">
  <thead class="text-left bg-grey-light border-b-2 border-grey">
    <tr>
      <th class="p-4">Name</th>
      <th class="p-4">Email</th>
      <th class="p-4">Location</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="p-4">James</td>
      <td class="p-4">James@example.com</td>
      <td class="p-4">United States</td>
    </tr>
     <tr>
      <td class="p-4">Martin</td>
      <td class="p-4">Martin@example.com</td>
      <td class="p-4">United Kingdom</td>
    </tr>
     <tr>
      <td class="p-4">Jeff</td>
      <td class="p-4">Jeff@example.com</td>
      <td class="p-4">Germany</td>
    </tr>
  </tbody>
</table>
</div>