tailwindcss 隐藏 class 在 table header / 行

Question

我正在尝试在 tailwindcss 中创建响应式 table 布局，如果显示尺寸是移动的，某些列将被隐藏。

我将 hidden sm:inline-block 添加到我想要隐藏的 th 和 td 值，但是 inline-block 显示打破了 table.我试过 block、flex、inline-flex 等，但在较大的屏幕尺寸下查看时，它们都会弄乱 header 和列的布局。

应该在断点指令而不是 inline-flex 中使用的这些元素的“正常”显示是什么？

看一下代码，通过删除 hidden sm:inline-block 您可以看到 应该 显示什么与显示什么。 https://play.tailwindcss.com/jyMaE0MVWx

Answer 1

默认值为 display: table-cell，因此设置 sm:table-cell 应该可以解决问题。这是你的游戏的混音 https://play.tailwindcss.com/g7PJ6ETsX5

编辑：您始终可以在计算属性选项卡内的检查器中找到元素的默认显示 属性。