JSFiddle - React, Tailwind, and code Playground

HTML

<table class="strategies">
    <thead>
    
    <tr>
        <th  class="first_single">Your spending and savings.
        </th>
        <th class="second"></th>
        <th class="fourth">Road</th>

        <th class="fifth_single"></th>
    </tr>
    </thead>
    <tbody>
    <tr ng-class="'odd'" class="odd">
        <td>
            <table class="docInfo">
                <tbody>
                <tr>
                    <td rowspan="2" class=""><img src="/concierge/images/doc7.png" alt="docimage"></td>
                    <td>John</td>
                </tr>
                <tr>
                    <td>Mar 6,2015 9:10:11 AM</td>
                </tr>
                </tbody>
            </table>

        </td>
        <td>Selected</td>
        <td><img src="/concierge/images/rb_unchecked.png" alt="radiobutton" ng-click="changeStatus(strategy,'selected',1)"
                 ng-show="strategy.statuses[0].status!='selected'" class=""><img src="/concierge/images/rb_checked.png"
                                                                                 alt="radiobutton"
                                                                                 ng-show="strategy.statuses[0].status=='selected'"
                                                                                 class="ng-hide"></td>
        <td><img src="/concierge/images/rb_unchecked.png" alt="radiobutton" ng-click="changeStatus(strategy,'selected',2)"
                 ng-show="strategy.statuses[1].status!='selected' &amp;&amp; persons.length == 2" class="ng-hide"><img
                src="/concierge/images/rb_checked.png" alt="radiobutton" ng-show="strategy.statuses[1].status=='selected'"
                class="ng-hide"></td>
    </tr>
    <tr ng-class="'odd'" class="odd">
        <td>
            <table class="docInfo">
                <tbody>
                <tr>
                    <td rowspan="2" class=""><img src="/concierge/images/doc7.png" alt="docimage"></td>
                   ...

CSS

.strategies {
    margin-top: 20px;
    table-layout: fixed;
}
.strategies td {
    margin: 0 5px;
    padding: 10px 18px;
    vertical-align: middle;
}
.strategies thead tr {
    background-color: white;
    color: black;
    vertical-align: bottom;
    text-align: left;
    padding-right: 14px;
}
.strategies thead th {
    padding: 12px 8px 7px;
    font-weight: lighter;
}
.strategies tbody tr {
    font-size: 14px;
}
.strategies tbody tr.odd {
    background-color: yellow;
}
.strategies tbody tr.even {
    background-color: grey;
    color: black;
}

.strategies .first {
    width: 40%;
}

.strategies .first_single {
    width: 69%;
}

.strategies .second {
    width: 30%;
}

.strategies .third {
    width: 20%;
}

.strategies .fourth {
    width: 20%;
}

.strategies .fifth {
    width: 20%;
}

.strategies .fifth_single {
    width: 1%;
}

.docInfo {
    table-layout: fixed;
    float: left;
}
.docInfo th, .docInfo td {
    margin: 0 5px;
    padding: 0px 5px;
    font-size: 10px;
    vertical-align: top;
    font-family: Arial;
    font-weight: bold;
}
.docInfo .first {
    width: 40%;
}
.docInfo .second {
    width: 60%;
}
.docInfo img {
    background: transparent;
    height: 25px;
}