JSFiddle - React, Tailwind, and code Playground

by danzkusuma

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<table class="table table-bordered">
    <thead>
        <tr>
            <th colspan="2" class="tc vm" rowspan="2">Pivot</th>
            <th colspan="2" class="tc">head A</th>
            <th colspan="2" class="tc">head B</th>
        </tr>
        <tr>
            <th class="tc">sub A1</th>
            <th class="tc">sub A1</th>
            <th class="tc">sub A1</th>
            <th class="tc">sub A1</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="rt tc vm"rowspan="2">satu</td>
            <td>satu X</td>
            <td>.</td>
            <td>.</td>
            <td>.</td>
            <td>.</td>
        </tr>
        <tr>
            <td>satu Y</td>
            <td>.</td>
            <td>.</td>
            <td>.</td>
            <td>.</td>
        </tr>
        <tr>
            <td class="rt tc vm" rowspan="2">dua</td>
            <td>dua X</td>
            <td>.</td>
            <td>.</td>
            <td>.</td>
            <td>.</td>
        </tr>
        <tr>
            <td>dua Y</td>
            <td>.</td>
            <td>.</td>
            <td>.</td>
            <td>.</td>
        </tr>
    </tbody>
</table>

CSS

.vm{
    vertical-align: middle !important;
}

.tc{
    text-align: center;
}

.rt{
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}