JSFiddle - React, Tailwind, and code Playground

by 2Yootz

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<table class="table table-bordered">
    <thead>
        <tr>
            <th rowspan="2">Date</th>
            <th rowspan="2">Day</th>
            <th rowspan="2">Time</th>
            <th colspan="2">Hours</th>
        </tr>
        <tr>
            <th>Total</th>
            <th>Final</th>
        </tr>
    </thead>
    <tbody>
        <tr class="row-odd">
            <td rowspan="4">4/17/2017</td>
            <td rowspan="4">Mon</td>
            <td>8:42 AM - 1:58 PM</td>
            <td>5.25</td>
            <td>&nbsp;</td>

        </tr>
        <tr class="row-odd">
            <td>3:52 PM - 6:07 PM</td>
            <td>2.25</td>
            <td>&nbsp;</td>

        </tr>
        <tr class="row-odd">
            <td>Travel</td>
            <td>4.00</td>
            <td>&nbsp;</td>

        </tr>
        <tr class="row-odd">
         <td colspan="2">&nbsp;</td>
            <td>11.53</td>
        </tr>
        <tr class="row-even">
            <td rowspan="3">4/18/2017</td>
            <td rowspan="3" class="f0">Tue</td>
            <td>8:06 AM - 2:12 PM</td>
            <td>4.12</td>
            <td>&nbsp;</td>

        </tr>
        <tr class="row-even">
            <td>3:24 PM - 6:19 PM</td>
            <td>2.90</td>
            <td>&nbsp;</td>

        </tr>
        <tr class="row-even">
            <td class="f1">&nbsp;</td>
            <td class="f2">&nbsp;</td>
            <td>9.02</td>
        </tr>
        <tr class="row-odd">
            <td rowspan="2">4/19/2017</td>
            <td rowspan="2" class="f0">Wed</td>
            <td>8:20 AM - 6:22 PM</td>
            <td>10.04</td>
            <td>&nbsp;</td>
        </tr>
        <tr class="row-odd">
            <td class="f1">&nbsp;</td>
            <td class="f2">&nbsp;</td>
           ...

CSS

thead th {
    text-align: center;
}

.table>thead>tr>th {
    vertical-align: top !important;
}

.day-total {
    font-weight: bold;
}

.grand-total {
    font-weight: bold;
}

.row-even {
    background-color: #FFF;
}

.row-odd {
    background-color: #F9F9F9;
    /*background-color:#FFF;*/
}

tfoot>tr>th {
    border-width: 0 !important;
}

.table {
    border-bottom-width: 0;
}

.f1 {
    border-right-width: 0 !important;
}

.f2 {
    border-left-width: 0 !important;
}