如何使用 tailwindcss 在 React 中创建 "scrollable view"

Question

您好，我是 tailwind CSS 的初学者，我只想知道如何让 table 标题（人，年龄）保持 still/fixed 但数据（克里斯, Dennis 等）在它下面是可滚动的，这样用户就可以浏览所有 data.I 希望 table 行在 table 下面 title.I 想要答案顺风 css 请。帮帮我

Answer 1

试试这个

<div class="flex flex-col h-screen">
    <div class="flex-grow overflow-auto">
      <table class="relative w-full border">
        <thead>
          <tr>
            <th class="sticky top-0 px-6 py-3 text-red-900 bg-red-300">Person</th>
            <th class="sticky top-0 px-6 py-3 text-red-900 bg-red-300">Age</th>
          </tr>
        </thead>
        <tbody class="divide-y bg-red-100">
          <tr>
            <td class="px-6 py-4 text-center">Chris</td>
            <td class="px-6 py-4 text-center">38</td>
          </tr>
          <tr>
            <td class="px-6 py-4 text-center">Dennis</td>
            <td class="px-6 py-4 text-center">45</td>
          </tr>
          <tr>
            <td class="px-6 py-4 text-center">Sarah</td>
            <td class="px-6 py-4 text-center">29</td>
          </tr>
          <tr>
            <td class="px-6 py-4 text-center">Karen</td>
            <td class="px-6 py-4 text-center">47</td>
          </tr>
          <tr>
            <td class="px-6 py-4 text-center">Paul</td>
            <td class="px-6 py-4 text-center">18</td>
          </tr>
          <tr>
            <td class="px-6 py-4 text-center">Jhon</td>
            <td class="px-6 py-4 text-center">25</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

Answer 2

您必须在 tbody 标签中添加 overflow-y-scroll

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-col h-screen">
    <div class="flex-grow">
      <table class="relative w-full border">
        <thead>
          <tr>
            <th class="sticky top-0 px-6 py-3 text-red-900 bg-red-300">Person</th>
            <th class="sticky top-0 px-6 py-3 text-red-900 bg-red-300">Age</th>
          </tr>
        </thead>
        <tbody class="divide-y bg-red-100 overflow-y-scroll">
          <tr>
            <td class="px-6 py-4 text-center">Chris</td>
            <td class="px-6 py-4 text-center">38</td>
          </tr>
          <tr>
            <td class="px-6 py-4 text-center">Dennis</td>
            <td class="px-6 py-4 text-center">45</td>
          </tr>
          <tr>
            <td class="px-6 py-4 text-center">Sarah</td>
            <td class="px-6 py-4 text-center">29</td>
          </tr>
          <tr>
            <td class="px-6 py-4 text-center">Karen</td>
            <td class="px-6 py-4 text-center">47</td>
          </tr>
          <tr>
            <td class="px-6 py-4 text-center">Paul</td>
            <td class="px-6 py-4 text-center">18</td>
          </tr>
          <tr>
            <td class="px-6 py-4 text-center">Jhon</td>
            <td class="px-6 py-4 text-center">25</td>
          </tr>
          <tr>
            <td class="px-6 py-4 text-center">Chris</td>
            <td class="px-6 py-4 text-center">38</td>
          </tr>
          <tr>
            <td class="px-6 py-4 text-center">Dennis</td>
            <td class="px-6 py-4 text-center">45</td>
          </tr>
          <tr>
            <td class="px-6 py-4 text-center">Sarah</td>
            <td class="px-6 py-4 text-center">29</td>
          </tr>
          <tr>
            <td class="px-6 py-4 text-center">Karen</td>
            <td class="px-6 py-4 text-center">47</td>
          </tr>
          <tr>
            <td class="px-6 py-4 text-center">Paul</td>
            <td class="px-6 py-4 text-center">18</td>
          </tr>
          <tr>
            <td class="px-6 py-4 text-center">Jhon</td>
            <td class="px-6 py-4 text-center">25</td>
          </tr><tr>
            <td class="px-6 py-4 text-center">Chris</td>
            <td class="px-6 py-4 text-center">38</td>
          </tr>
          <tr>
            <td class="px-6 py-4 text-center">Dennis</td>
            <td class="px-6 py-4 text-center">45</td>
          </tr>
          <tr>
            <td class="px-6 py-4 text-center">Sarah</td>
            <td class="px-6 py-4 text-center">29</td>
          </tr>
          <tr>
            <td class="px-6 py-4 text-center">Karen</td>
            <td class="px-6 py-4 text-center">47</td>
          </tr>
          <tr>
            <td class="px-6 py-4 text-center">Paul</td>
            <td class="px-6 py-4 text-center">18</td>
          </tr>
          <tr>
            <td class="px-6 py-4 text-center">Jhon</td>
            <td class="px-6 py-4 text-center">25</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

如何使用 tailwindcss 在 React 中创建 "scrollable view"

How to create a "scrollable view" in React using tailwindcss

javascript

scroll

overflow

reactjs

tailwind-css