JSFiddle - React, Tailwind, and code Playground

by Terry Mun

HTML

<table>
    <tr>
        <td>
            <div class="inner">
                Content<br />Content
            </div>
        </td>
        <td>
            <div class="inner">
                Content
            </div>
        </td>
        <td>
            <div class="inner">
                Content
            </div>
        </td>
        <td>
            <div class="inner">
                Content
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="inner">
                Content<br />Content
            </div>
        </td>
        <td>
            <div class="inner">
                Content
            </div>
        </td>
        <td>
            <div class="inner">
                Content
            </div>
        </td>
        <td>
            <div class="inner">
                Content
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="inner">
                Content<br />Content
            </div>
        </td>
        <td>
            <div class="inner">
                Content
            </div>
        </td>
        <td>
            <div class="inner">
                Content
            </div>
        </td>
        <td>
            <div class="inner">
                Content<br />Content<br />Content
            </div>
        </td>
    </tr>
</table>

CSS

body {
    padding: 20px;
}
table {
    width: 100%;
}
table td {
    padding: 15px 10px;
    position: relative;
    border-bottom: 1px solid #e5e5e5;
}
table td:before {
    border-right: 1px solid #e5e5e5;
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    right: 10px;
    width: 0;
}
    table td:last-child:before {
        display: none;    
    }
table td div.inner {
    padding: 10px 25px 10px 0;   
}