CODEWITHSUNDEEP
tailwind-css
Petro Gromovo
Petro Gromovo

Reputation: 2171

How in tailwindcss table hide column on small devices?

With tailwindcss 2 I want to hide some columns in the 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

Upvotes: 9

Views: 13391

Answers (4)

vogomatix
vogomatix

Reputation: 5041

Whilst tailwind is essentially mobile first there are classes you can use to specifically not show attributes on displays below a certain size

<div class="max-md:hidden">
Only show on screens larger than md size
</div>
// OR
<div class="max-xl:collapse">
Only show on screens larger than XL
</div>

Upvotes: 1

GD21
GD21

Reputation: 383

as a more general answer, not regarding table cells, another display type can be chosen to overwrite hidden.

https://tailwindcss.com/docs/display

example:

<p class="hidden lg:flex">Only visible on larger than lg</p>

Upvotes: 4

JPDevM
JPDevM

Reputation: 121

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:)

Upvotes: 2

Kevin Yobeth
Kevin Yobeth

Reputation: 1017

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.

Upvotes: 17

Related Questions