JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table-wrapper">
    <table class="mytable">
        <tr>
            <th class="mytd">1</th>
            <th class="mytd">2</th>
            <th class="mytd">3</th>
            <th class="mytd">4</th>
            <th class="mytd">5</th>
            <th class="mytd">6</th>
            <th class="mytd">7</th>
        </tr>
        <tr>
            <td class="mytd">1</td>
            <td class="mytd">2</td>
            <td class="mytd">3</td>
            <td class="mytd">4</td>
            <td class="mytd">5</td>
            <td class="mytd">6</td>
            <td class="mytd">7</td>
        </tr>
    </table>
</div>

CSS

.table-wrapper {
    width: 700px;
    overflow: auto;
}

.mytable {
    border-collapse: collapse;
}

.mytd {
    min-width: 300px;
    width: 300px;
    max-width: 300px;
    border: 1px solid black;
}