JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <tr>
            <th> colA </th>
            <th> colB </th>
            <th> colC </th>
            <th> colD </th>
            <th> colE </th>
            <th> XX </th>
            <th> YY </th>
        </tr>
    </thead>
    <tr>
        <td> first col is very very very very very very very very very large </td>
        <td> second col </td>
        <td> third col </td>
        <td> fourth col </td>
        <td> fifth col </td>
        <td> XX </td>
        <td> YY </td>
    </tr>    <tr>
        <td> first col </td>
        <td> second col </td>
        <td> third col </td>
        <td> fourth col </td>
        <td> fifth col </td>
        <td> XX </td>
        <td> YY </td>
    </tr>
    <tr>
        <td> first col </td>
        <td> second col </td>
        <td> third col </td>
        <td> fourth col </td>
        <td> fifth col </td>
        <td> XX </td>
        <td> YY </td>
    </tr>
</table>

CSS

table
{
    width: 100%;
}

td
{
    white-space: nowrap;
}