tailwind-css - Tailwind css溢出下拉问题

Question

使用圆角桌让下拉列表显示其全高的最佳方法是什么？

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

https://play.tai​​lwindcss.com/gZeMiyEPmm

任何帮助将不胜感激。

标签： tailwind-css

Answer 1

我发现的最简单的解决方案是删除overflow-hidden并添加sm:rounded-[xy]-lg（其中 x 是bort和 y 是lor 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;
}