How in tailwindcss table hide column on small devices?

Question

With tailwindcss 2 I want to hide some columns in table on small devices using 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>

I expected that on devices 640px and smaller 2 columns would be hidden, but failed.

Which syntax is correct ?

Thanks

Answer 1

Tailwind uses a mobile first breakpoint system, meaning, if you use hidden class, it will affect all the screen sizes. But if you attach a prefix such as sm, md, lg, xl and 2xl it will target the corresponding screen size and above it. You can read more about it here.

For example, using sm:hidden will only hide the element on sm and above screen size. So, you could combine it together such as, hidden md:table-cell it will not show on screen size lower than sm breakpoint.

Answer 2

Here you have an example.

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

And here you have all the display properties to play around with a bit more. (Remember to combine it with the hidden property + the responsive variants sm:, md:, lg:, xl:, 2xl:)