JSFiddle - React, Tailwind, and code Playground

by bilalfazlani

HTML

<table class="thetable" style="border-collapse:collapse;border:1px solid black;">
    <tr>
        <th>
            <span>
                Name
            </span>
        </th>
        <th>
            <span>
                Address
            </span>
        </th>
        <th>
            <span>
                Phone
            </span>
        </th>
        <th>
            <span>
                Phone Phone Phone Phone Phone Phone Phone Phone Phone PhonePhonePhonePhonePhone
            </span>
        </th>
    </tr>
    <tr>
        <td>
            A
        </td>
        <td>
            B
        </td>
        <td>
            C
        </td>
        <td>
            D
        </td>
    </tr>
</table>

CSS

.thetable td, .thetable th {
        border:1px solid black;
    }

    .thetable td {
        text-align:center;
    }

    .thetable th {

    }

    .thetable th span {
        transform: rotate(270deg);
        -ms-transform: rotate(270deg); /* IE 9 */
        -webkit-transform: rotate(270deg);
        display: block;
        background-color:greenyellow;
    }