JSFiddle - React, Tailwind, and code Playground

by George Batt

HTML

<div class="cntnr">
    <div class="tabonecntnr">
        <table class="wd100 tabone">
            <tbody>
                <tr>
                    <td>TABLENAME</td>
                    <td>lorem ipsum</td>
                    <td>ABC</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="tabtwocntnr">
        <table class="wd100 tabtwo">
            <thead>
                <tr>
                    <th>Header 1</th>
                    <th>Header 2</th>
                    <th>Header 3</th>
                    <th>Header 4</th>
                    <th>Header 5</th>
                    <th>Header 6</th>
                    <th>Header 7</th>
                    <th>Header 8</th>
                    <th>Header 9</th>
                    <th>Header 10</th>
                    <th>Header 11</th>
                    <th>Header 12</th>
                    <th>Header 13</th>
                    <th>Header 14</th>
                    <th>Header 15</th>
                    <th>Header 16</th>
                    <th>Header 17</th>
                    <th>Header 18</th>
                    <th>Header 19</th>
                    <th>Header 20</th>
                    <th>Header 1</th>
                    <th>Header 2</th>
                    <th>Header 3</th>
                    <th>Header 4</th>
                    <th>Header 5</th>
                    <th>Header 6</th>
                    <th>Header 7</th>
                    <th>Header 8</th>
                    <th>Header 9</th>
                    <th>Header 10</th>
                    <th>Header 11</th>
                    <th>Header 12</th>
                    <th>Header 13</th>
                    <th>Header 14</th>
                    <th>Header 15</th>
                    <th>Header 16</th>
                    <th>Header 17</th>
                    <th>Header 18</th>
                    <th>Header 19</th>
                    <th>Header 20</th>
                </tr>
           ...

CSS

.wd100 {
    width:100%;
}
.cntnr {
    overflow-x:auto;
    width: 100%;
    border: 1px solid black;
}
.bgred {
    background: red;
}
.tabone, .tabtwo {
    border-collapse: collapse;
}
.tabone td {
    background: red;
}
.tabonecntnr, .tabtwocntnr {
    width:100%;
    overflow: hidden;
}