时间戳

首页 > 解决方案 > 不工作的顺风断点

breakpoints - 不工作的顺风断点

问题描述

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

我正在做 ：

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

标签： breakpointstailwind-css

解决方案

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

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

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

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

查看此演示

推荐阅读