JSFiddle - React, Tailwind, and code Playground

by _kdts

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table class="table table-sm table-bordered table-condensed" cellspacing="0" width="100%">
    <tbody>
        <tr>
            <td colspan="2"></td>
            <td>Differenz</td>
        </tr>
        <tr>
            <td colspan="2">Gesamtzahl der Zulassungen</td>
            <td></td>
        </tr>
        <tr>
            <td>Jun. 2018</td>
            <td>458</td>
            <td rowspan="2" class="text-vertical-middle">+ 14,5%</td>
        </tr>
        <tr>
            <td>Jun. 2017</td>
            <td>400</td>
        </tr>
        <tr>
            <td colspan="2">Händler</td>
            <td></td>
        </tr>
        <tr>
            <td>Jun. 2018</td>
            <td>237</td>
            <td rowspan="2" class="text-vertical-middle">+ 50,9%</td>
        </tr>
        <tr>
            <td>Jun. 2017</td>
            <td>157</td>
        </tr>
        <tr>
            <td colspan="2">Vermieter</td>
            <td></td>
        </tr>
        <tr>
            <td>Jun. 2018</td>
            <td>37</td>
            <td rowspan="2" class="text-vertical-middle">- 26%</td>
        </tr>
        <tr>
            <td>Jun. 2017</td>
            <td>50</td>
        </tr>
        <tr>
            <td colspan="2">Privat</td>
            <td></td>
        </tr>
        <tr>
            <td>Jun. 2018</td>
            <td>30</td>
            <td rowspan="2" class="text-vertical-middle">- 50%</td>
        </tr>
        <tr>
            <td>Jun. 2017</td>
            <td>60</td>
        </tr>
        <tr>
            <td colspan="2">Gewerblich</td>
            <td></td>
        </tr>
        <tr>
            <td>Jun. 2018</td>
            <td>94</td>
            <td rowspan="2" class="text-vertical-middle">+ 17,5%</td>
        </tr>
        <tr>
            <td>Jun. 2017</td>
            <td>80</td>
        </tr>
        <tr >
            <td colspan="2">Anteil des...

CSS

table tbody tr:first-child td:first-child{
    /*border: 1px solid green;
    #dee2e6*/
    border-top: 0px;
    border-left: 0px;
}

table tbody tr:first-child td:last-child{
    background-color: rgba(0,0,0,.05);;
}

table tbody tr:nth-child(3n-1){
    font-weight: bold;
    border: 1px solid #ccc;
    background-color: rgba(0,0,0,.05);
}

table tbody tr:nth-child(3n-1) td{
    /*color: red;
    border-top: 1px solid red;
    border-bottom: 1px solid red;*/
}

.text-vertical-middle{
    vertical-align: middle!important;
    text-align: center;
}