如何使用 tailwindcss 2.1 制作水平滚动的表格？

Question

我想为其内容制作水平滚动的表格，并且我尝试whitespace-nowrap对具有长内容的表格单元格使用类，并对所有表格使用overflow-x-auto，例如：

    <div class="editor_listing_wrapper_bix_width">


        <table class=" overflow-x-auto p-1 m-1 d2">
            <thead class="bg-gray-700 border-b-2 border-t-2 border-gray-300">
            <tr>
                <th class="w-1/12 py-2">Id</th>
                <th class="w-4/12 py-2">Name</th>
                <th class="w-4/12 py-2">Description</th>
                <th class="w-1/12 py-2"></th>
            </tr>
            </thead>
            <tbody>

            <tr>

                <td>1</td>
                <td class="whitespace-nowrap">
                    Laptops
                    <small class="pl-2 pt-1">
                        ( Used in 2 ad(s) )
                    </small>
                </td>

                <td class="whitespace-nowrap p-1">Laptops description Lorem ipsum dolor sit amet,
                    consectetur
                    adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                    aliqua....
                </td>

但看起来水平滚动适用于所有区域，不适用于我的桌子

请看笔：https ://codepen.io/sergeynilov/pen/eYgjVgM

我使用 tailwindcss 2.1.0。

谢谢！

Answer 1

决定是在包装div中设置overflow-x-auto：

<div class="overflow-x-auto">
    <table class="editor_listing_table">

定义了自定义类：

.editor_listing_table {
    @apply w-full p-2 m-1;
}

这提供了我需要的功能！