Question

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

我在做：

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

Answer 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

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

1 个答案: