CODEWITHSUNDEEP
breakpointstailwind-css
Swifty
Swifty

Reputation: 19

tailwind breaktpoints for <th> not working

I want the columns of a table to be a bit wider on small screens (so that the icons I use in them are still a decent size)

I'm doing :

<th  style="width:41% sm:width:35%" class="py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Name/No
                    </th>
                    <th style="width:3% sm:width:5% " ></th>
                    <th style="width:3% sm:width:5% " ></th>
                    <th style="width:3% sm:width:5% " ></th>```

but it only uses the 5% not the 3% no matter how big my window is

PS there are some other <th> before this so the total percentage = 100%

Upvotes: 1

Views: 3280

Answers (1)

Digvijay
Digvijay

Reputation: 8927

First of, sm cannot be used inside style.

table-fixed - You can manually set the widths for some columns.

Use break-words to add line breaks mid-word if needed.

<table class="table-fixed w-full">
  <thead>
    <tr class="break-words">
      <th class="bg-gray-100 w-40 sm:w-auto">Title</th>
      <th class="bg-gray-100">Author</th>
      <th class="bg-gray-100">Views</th>
      <th class="bg-gray-100">Views2</th>
      <th class="bg-gray-100">Views3</th>
      <th class="bg-gray-100">Views4</th>
      <th class="bg-gray-100">Views5</th>
      <th class="bg-gray-100">Views6</th>
      <th class="bg-gray-100">Views7</th>
      <th class="bg-gray-100">Views8</th>
      <th class="bg-gray-100">Views9</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

Checkout this demo

Upvotes: 1

Related Questions