如何在tailwindcss表中隐藏小型设备上的列？

Posted 2023-03-07

【中文标题】如何在tailwindcss表中隐藏小型设备上的列？

【英文标题】：How in tailwindcss table hide column on small devices?

【发布时间】：2021-07-30 10:29:11

【问题描述】：

使用 tailwindcss 2，我想在小型设备上使用 sm:hidden: 隐藏表格中的一些列：

<table class="table-auto">
    <thead class="bg-gray-700 border-b-2 border-t-2 border-gray-300">
    <tr>
        <th class="py-2">Name</th>
        <th class="py-2">Active</th>
        <th class="py-2">Type</th>
        <th class="py-2 sm:hidden">Category</th>
        <th class="py-2 sm:hidden">Mailchimp Id</th>
        <th class="py-2"></th>
    </tr>
    </thead>
    <tbody>

        <tr>
            <td class="">
               Name content
            </td>
            <td class="">
               Active content
            </td>
            <td class="">
                 Typecontent
            </td>

            <td class="  sm:hidden">
                Category content
            </td>

            <td class="sm:hidden">
                mailchimp content
            </td>

我预计在设备上 640 像素和更小的 2 列会被隐藏，但失败了。

哪种语法是正确的？

谢谢

【参考方案1】：

Tailwind 使用的是移动优先断点系统，也就是说，如果你使用hidden 类，它会影响所有的屏幕尺寸。但是，如果您附加诸如sm、md、lg、xl 和2xl 之类的前缀，它将针对相应的屏幕尺寸及以上。你可以阅读更多关于它的信息here。

例如，使用sm:hidden 只会隐藏 sm 及以上屏幕尺寸的元素。因此，您可以将它们组合在一起，例如，hidden md:table-cell 它不会在小于sm 断点的屏幕上显示。

【讨论】：

谢谢！但经过一些测试后，我似乎需要“隐藏的 md：table-cell”。看起来 table 使用“table-cell”？

对，我才意识到这是一张桌子。我已经更新了我的答案。您能否将答案标记为已回答。

【参考方案2】：

这里有一个例子。

<table className="whitespace-nowrap">
  <thead>
    <tr>
      <th>Name</th>
      <th>Active</th>
      <th className="hidden md:table-cell">Type</th>
      <th className="hidden md:table-cell">Category</th>
      <th className="hidden lg:table-cell">Mailchip</th>
      <th className="hidden lg:table-cell">other</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Name content</td>
      <td>Active content</td>
      <td className="hidden md:table-cell">Type content only in md</td>
      <td className="hidden md:table-cell">Category content only in md</td>
      <td className="hidden lg:table-cell">Mailchip content only in lg</td>
      <td className="hidden lg:table-cell">other content only in lg</td>
    </tr>
  </tbody>
</table>

在这里，您可以使用所有 display 属性。 （记得把它和隐藏属性+响应式变量sm:、md:、lg:、xl:、2xl:结合起来）