我正在尝试使用TailwindCSS构建一个可调整大小的列表,下面是Tanstack上的示例。
当我检查生成的HTML代码时,Width类作为w-[30px]
添加到td
,这是我预期的结果,但TailwindCSS只是忽略了它,即使我使用table-fixed
和resize
类。
我想知道是否支持在呈现表格后更改宽度,或者是否有我遗漏的类。
根据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>
1条答案
按热度按时间qyswt5oh1#
您正在使用动态类名:
w-[${column.getSize()}px]
这在Tailwind中无法实现,请参见https://tailwindcss.com/docs/content-configuration#dynamic-class-names
相反,您可以尝试将宽度设置为样式而不是类。