TailwindCSS可调整大小的列

zbsbpyhn  于 2023-05-19  发布在  其他
关注(0)|答案(1)|浏览(204)

我正在尝试使用TailwindCSS构建一个可调整大小的列表,下面是Tanstack上的示例。
当我检查生成的HTML代码时,Width类作为w-[30px]添加到td,这是我预期的结果,但TailwindCSS只是忽略了它,即使我使用table-fixedresize类。
我想知道是否支持在呈现表格后更改宽度,或者是否有我遗漏的类。
根据Tailwind文档:
您可以手动设置某些列的宽度,其余的可用宽度将在列之间均匀划分,而没有明确的宽度。
我已经试过只允许表中5列中的3列可调整大小,结果是一样的。
这是我的表的简化定义:

<table className="w-full text-center mb-12 table-fixed">
   <thead className="border-0 top-0 sticky bg-white">
       <tr>
           <th className={`text-gray-700 font-bold w-[${column.getSize()}px]`}
                   {header.getContext()}
           </th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td className={`text-gray-300 w-[${column.getSize()}px] `}
               {cell.getContext()}
           </td>
       </tr>
   </tbody>
</table>
qyswt5oh

qyswt5oh1#

您正在使用动态类名:w-[${column.getSize()}px]
这在Tailwind中无法实现,请参见https://tailwindcss.com/docs/content-configuration#dynamic-class-names
相反,您可以尝试将宽度设置为样式而不是类。

相关问题