<th> 的顺风断点不起作用

【问题标题】：tailwind breaktpoints for <th> not working<th> 的顺风断点不起作用
【发布时间】：2021-06-02 21:32:02
【问题描述】：

我希望表格的列在小屏幕上稍微宽一些（这样我在其中使用的图标仍然是合适的大小）

我在做：

<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%

【问题讨论】：

标签： breakpoints tailwind-css

【解决方案1】：

首先，sm不能用于内部样式。

table-fixed - 您可以手动设置某些列的宽度。

如果需要，使用break-words 在单词中间添加换行符。

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

查看此demo

【讨论】：