JSFiddle - React, Tailwind, and code Playground

by Fi_Vi

HTML

<table class="tableSection">
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>
        <tr>
            <td>Text</td>
            <td>This does work very well with blank spaces. The text has no limitation in size, line breaks will simply be added.</td>
            <td>Text</td>
        </tr>
        <tr>
            <td>Text</td>
            <td>This_does_not_work_sadly,_which_is_a_huge_problem,_since_blank_spaces_are_not_permitted_as_word_delimiters.</td>
            <td>Text</td>
        </tr>
        <tr>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>
    </tbody>
</table>

CSS

table.tableSection {
        display: table;
        width: 100%;
        table-layout: fixed;
        word-wrap: break-word;
    }
    table.tableSection thead, table.tableSection tbody {
        float: left;
        width: 100%;
    }
    table.tableSection tbody {
        overflow-y: auto;
        overflow-x: hidden;
        height: 100px;
    }
    table.tableSection tr {
        width: 100%;
        display: table;
        text-align: left;
    }
    table.tableSection th, table.tableSection td {
        width: 33%;
    }