How to make table with horizontal scrolling with tailwindcss 2.1?

[mstdmstd]

I want to make table with horizontal scrolling for its content and
I try to use whitespace-nowrap class for table cells which have long content and
overflow-x-auto for all the table, like:

    <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>

But looks like  horizontal scrolling is for all area, not for my table

Pls, take look at pen: https://codepen.io/sergeynilov/pen/eYgjVgM

I use tailwindcss 2.1.0.

Thanks!