如何使用 tailwind css 使表格可水平滚动而不是整个页面

问题描述 投票：0回答：1
html css horizontal-scrolling scrollable
1个回答
0
投票

您似乎想创建一个具有固定宽度和高度的表格，并使其在移动设备上水平滚动。我注意到你正在使用 tailwind CSS 类来设计你的表格。要实现所需的行为，您可以对代码进行以下更改：

  1. 将表格包裹在固定高度的容器div内，并设置其 溢出到自动以启用滚动：
<div class="table-wrp block min-h-96 overflow-x-auto">
    <table class="w-full">
        <!-- Your table content goes here -->
    </table>
</div>
  1. 修改表结构，去掉不必要的类，使其更简单：
<div class="table-wrp block min-h-96 overflow-x-auto">
    <table class="w-full">
        <thead class="bg-white border-b sticky top-0">
            <tr>
                <th bgcolor="#45abe0" class="p-4 text-xs font-bold text-white text-center">TRACK 1</th>
                <th bgcolor="#ff661b" class="p-4 text-xs font-bold text-white text-center">TRACK 2</th>
                <th bgcolor="#0099a8" class="p-4 text-xs font-bold text-white text-center">TRACK 3</th>
                <th bgcolor="#00539f" class="p-4 text-xs font-bold text-white text-center">TRACK 4</th>
                <th bgcolor="#76bc21" class="p-4 text-xs font-bold text-white text-center">TRACK 5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td bgcolor="#74c0e8" class="p-4 text-xs font-bold text-white text-center">
                    <h4>Getting Help Early</h4>
                </td>
                <td bgcolor="#ff8c54" class="p-4 text-xs font-bold text-white text-center">
                    <h4>Getting the Best Possible Care&nbsp;</h4>
                </td>
                <td bgcolor="#40b2be" class="p-4 text-xs font-bold text-white text-center">
                    <h4>Getting Diverted from Justice System Involvement</h4>
                </td>
                <td bgcolor="#407eb7" class="p-4 text-xs font-bold text-white text-center">
                    <h4>Research Updates</h4>
                </td>
                <td bgcolor="#9bcd61" class="p-4 text-xs font-bold text-white text-center">
                    <h4>Youth Voices</h4>
                </td>
            </tr>
            <!-- Additional table rows here -->
        </tbody>
    </table>
</div>
  1. 此外，请确保在 HTML 的 head 部分设置视口元标记，以确保在移动设备上正确呈现：
<head>
    <!-- Other meta tags and stylesheets -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

通过这些更改，您的表格应该具有固定的宽度和高度，并且可以在移动设备上水平滚动。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.