JSFiddle - React, Tailwind, and code Playground

by skram

HTML

<table>
    <colgroup>
        <col width="36%" /> <!-- longer -->
        <col width="15%" />
        <col width="13%" />
        <col width="13%" />
        <col width="13%" />  
        <col width="5%" />
        <col width="5%" />         
    </colgroup>
    <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%;
    table-layout: fixed;
}

td
{
    white-space: nowrap;
    overflow: hidden;
}