JSFiddle - React, Tailwind, and code Playground

HTML

<table class="items table table-striped table-bordered table-condensed">
    <thead>
        <tr>
            <th id="operations_c0" class="checkbox-column">
                <input type="checkbox" id="operations_c0_all" name="operations_c0_all" value="1" class="select-on-check-all">
            </th>
            <th id="operations_c1">Permissions</th>
        </tr>
    </thead>
    <tbody>
        <tr class="">
            <td colspan="2" class="extrarow"><strong>Auth :: Permission</strong>

            </td>
        </tr>
        <tr class="odd">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_0" value="oAuthOperationCreate" class="select-on-check">
            </td>
            <td>Create</td>
        </tr>
        <tr class="even">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_1" value="oAuthOperationRead" class="select-on-check">
            </td>
            <td>Read</td>
        </tr>
        <tr class="odd">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_2" value="oAuthOperationUpdate" class="select-on-check">
            </td>
            <td>Update</td>
        </tr>
        <tr class="even">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_3" value="oAuthOperationDelete" class="select-on-check">
            </td>
            <td>Delete</td>
        </tr>
        <tr class="odd">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_4" value="oAuthOperationList" class="select-on-check">
            </td>
            <td>List</td>
        </tr>
        <tr class="even">
            <td class="checkbox-column">
                <input...

CSS

table, thead, tbody, tr, th, td {
    display: block;
    text-align: left;
}
table, thead, tbody {
    width: 100%;
}
tr {
        position: absolute;
}
tr:after {
    content:' ';
    display: block;
    clear: both;
}
td, th {
    float: left;
}

JavaScript

$(function () {
    var left = -1;
    var top = 0;
    $('tr').each(function () {
        var extrarow = $('td', this).hasClass('extrarow');
        top += $('td',this).first().height();
        if(extrarow) {
            left += 1;
            top = 0;
        }
        $(this).css({
            width: '33.33%',
            top: top,
            'left': (left * 33.33) + '%'
        });
    });
});