JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<table>
    <thead>
        <tr>
            <th class="th1">th alala</th>
            <th class="th2">th lala</th>
            <th class="th3">th lalala</th>
            <th class="th4 t4">th lala</th>
            <th class="th5">th laooolala</th>
            <th class="th6">th lalal  asd a</th>
            <th class="th7">th lalala</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>td lalala</td>
            <td>td lal</td>
            <td>td lalala</td>
            <td class="t4">td lalala lalala lalala</td>
            <td>td lalala lalala</td>
            <td>td lalala</td>
            <td>td lalala</td>
        </tr>
        <tr>
            <td>td lalala</td>
            <td>td lal</td>
            <td>td lalala</td>
            <td class="t4">td lalala lalala lalala</td>
            <td>td lalala lalala</td>
            <td>td lalala</td>
            <td>td lalala</td>
        </tr>
        <tr>
            <td>td lalala</td>
            <td>td lal</td>
            <td>td lalala</td>
            <td class="t4">td lalala lalala lalala</td>
            <td>td lalala lalala</td>
            <td>td lalala</td>
            <td>td lalala</td>
        </tr>
    </tbody>
</table>

CSS

table {
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

th, td {
    border: 1px solid;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.th1 {
    width: 30px;
}

.th2 {
    width: 20px;
}

.th3 {
    width: 60px;
}

.th4 {

}

.th5 {
    width: 60px;
}

.th6 {
    width: 20px;
}

.th7 {
    width: 10px;
}