How to make table with horizontal scrolling with tailwindcss 2.1?

[sergeynilov]

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!