使用Tailwind CSS创建一个带有粘性列的表格
You know, tables are those elements that we always try to avoid using. Besides being tricky to manage with CSS, tables with many columns force users to scroll horizontally to view everything, making them less user-friendly, especially on small screens.
你知道的，我们总是尽量避免使用表格。除了在 CSS 中管理起来比较棘手之外，具有许多列的表格会迫使用户水平滚动以查看所有内容，这使得它们在小屏幕上尤其不友好。
But there are cases where we need to display a large amount of data, and we can’t avoid using them. What we can do instead is improve usability by using some small tricks. For example, imagine having a specific column containing important information that you always want to keep in view: this is where we can make this column sticky so that it remains visible while scrolling horizontally through the rest of the table.
但是有些情况下我们需要展示大量的数据，而且无法避免使用表格。不过我们可以通过一些小技巧来提高可用性。例如，想象一下有一列包含重要信息，你总是希望保持可见：这就是我们可以将这一列固定在视图中，使其在水平滚动表格的同时保持可见。
In this code snippet, we’ll show you how to create a table with a sticky column – in this case, the last column with the call-to-action. As in many other tutorials in this section, we’ll achieve this using only Tailwind CSS, so you won’t have to write a single line of CSS!
在这个代码片段中，我们将展示如何创建一个带有粘性列的表格 - 在这种情况下，是最后一列的行动呼叫。与本节中的许多其他教程一样，我们将仅使用 Tailwind CSS 来实现这一点，因此您不需要编写一行 CSS 代码！
Code
代码
<div class="w-full max-w-2xl bg-white shadow-xl rounded-2xl"> <header class="px-4 py-3 border-b border-slate-200"> <h2 class="font-semibold text-slate-900">My Wallet</h2> </header> <div class="p-3"> <!-- Table --> <div class="overflow-x-auto"> <table class="table-auto w-full"> <!-- Table header --> <thead class="text-[13px] text-slate-500/70"> <tr> <th class="px-5 py-2 first:pl-3 last:pr-3 bg-slate-100 first:rounded-l last:rounded-r last:pl-5 last:sticky last:right-0"> <div class="font-medium text-left">#</div> </th> <th class="px-5 py-2 first:pl-3 last:pr-3 bg-slate-100 first:rounded-l last:rounded-r last:pl-5 last:sticky last:right-0"> <div class="font-medium text-left">Name</div> </th> <th class="px-5 py-2 first:pl-3 last:pr-3 bg-slate-100 fir...