Tailwind css溢出下拉问题

Question

使用圆角桌让下拉菜单显示其全高的最佳方式是什么？

有建议应该删除溢出隐藏。但如果它被删除，圆角看起来很难看。没有overflow-hidden，下拉菜单在表格长度之后隐藏。

https://play.tailwindcss.com/gZeMiyEPmm

任何帮助将不胜感激。

Answer 1

我发现的最简单的解决方案是删除overflow-hidden 并将sm:rounded-[xy]-lg（其中x 是b 或t，y 是l 或r）添加到正确的th s 和tds。

为了简化事情，我认为将其添加到您的 css 中会更容易：

table thead tr th:first-of-type {
  @apply sm:rounded-tl-lg;
}

table thead tr th:last-of-type {
  @apply sm:rounded-tr-lg
}

table tbody tr:last-of-type td:first-of-type {
    @apply sm:rounded-bl-lg;
}

table tbody tr:last-of-type td:last-of-type {
    @apply sm:rounded-br-lg;
}