<table class="strategies">
<thead>
<link href="style.css" type="text/css" rel="stylesheet">
<tr>
    <th ng-class="persons.length>1 ? 'first' : (persons.length<2 ? 'first_single' : '') "
        class="ng-binding first_single">Your spending and savings.
    </th>
    <th class="second"></th>
    <th class="fourth ng-binding">Road</th>
    <th ng-class="persons.length>1 ? 'fifth' : (persons.length<2 ? 'fifth_single' : '') "
        class="ng-binding fifth_single"></th>
</tr>
</thead>
<tbody>
<tr ng-class="'odd'" class="odd">
    <td>
        <table class="docInfo">
            <tbody>
            <tr>
                <td rowspan="2" ng-show="showDocInfo(1,strategy.statuses[0].reason)" ng-click="openModal(1,strategy)"
                    class=""><img src="/concierge/images/doc7.png" alt="docimage"></td>
                <td ng-show="showDocInfo(1,strategy.statuses[0].reason)" class="ng-binding">Road</td>
            </tr>
            <tr>
                <td ng-show="showDocInfo(1,strategy.statuses[0].reason)" class=""><span><p class="ng-binding">Mar 6,
                    2015 9:10:11 AM
                </p></span></td>
            </tr>
            </tbody>
        </table>
        <table class="docInfo">
            <tbody>
            <tr>
                <td rowspan="2" ng-show="showDocInfo(2,strategy.statuses[1].reason)" ng-click="openModal(2,strategy)"
                    class="ng-hide"><img src="/concierge/images/doc7.png" alt="docimage"></td>
                <td ng-show="showDocInfo(2,strategy.statuses[1].reason)" class="ng-binding ng-hide"></td>
            </tr>
            <tr>
                <td ng-show="showDocInfo(2,strategy.statuses[1].reason)" class="ng-hide"><span><p class="ng-binding">
                </p></span></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="'even'" class="even">
    <td></td>
    <td>Deselected.12 month review</td>
    <td><img src="/concierge/images/rb_unchecked.png" ng-click="changeStatus(strategy,'in12months',1)"
             ng-show="strategy.statuses[0].status!='in12months'" class=""><img src="/concierge/images/rb_checked.png"
                                                                               ng-show="strategy.statuses[0].status=='in12months'"
                                                                               class="ng-hide"></td>
    <td><img src="/concierge/images/rb_unchecked.png" ng-click="changeStatus(strategy,'in12months',2)"
             ng-show="strategy.statuses[1].status!='in12months' &amp;&amp; persons.length == 2" class="ng-hide"><img
            src="/concierge/images/rb_checked.png" ng-show="strategy.statuses[1].status=='in12months'" class="ng-hide">
    </td>
</tr>
<tr ng-class="'odd'" class="odd">
    <td></td>
    <td>Deselected. Not interested</td>
    <td><img src="/concierge/images/rb_unchecked.png" ng-click="changeStatus(strategy,'never',1)"
             ng-show="strategy.statuses[0].status!='never'" class="ng-hide"><img src="/concierge/images/rb_checked.png"
                                                                                 ng-show="strategy.statuses[0].status=='never'"
                                                                                 class=""></td>
    <td><img src="/concierge/images/rb_unchecked.png" ng-click="changeStatus(strategy,'never',2)"
             ng-show="strategy.statuses[1].status!='never' &amp;&amp; persons.length == 2" class="ng-hide"><img
            src="/concierge/images/rb_checked.png" ng-show="strategy.statuses[1].status=='never'" class="ng-hide"></td>
</tr>
<tr ng-class="'even'" class="even">
    <td></td>
    <td>Not proposed</td>
    <td><img src="/concierge/images/rb_unchecked.png" ng-click="changeStatus(strategy,'outOfScope',1)"
             ng-show="strategy.statuses[0].status!='outOfScope'" class=""><img src="/concierge/images/rb_checked.png"
                                                                               ng-show="strategy.statuses[0].status=='outOfScope'"
                                                                               class="ng-hide"></td>
    <td><img src="/concierge/images/rb_unchecked.png" ng-click="changeStatus(strategy,'outOfScope',2)"
             ng-show="strategy.statuses[1].status!='outOfScope' &amp;&amp; persons.length == 2" class="ng-hide"><img
            src="/concierge/images/rb_checked.png" ng-show="strategy.statuses[1].status=='outOfScope'" class="ng-hide">
    </td>
</tr>
</tbody></table>

.strategies {
  margin-top: 20px;
  table-layout: fixed;
}
.strategies td {
  margin: 0 5px;
  padding: 20px 18px;
  vertical-align: top;
}
.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;
  line-height: 0.2;
  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;
}

how can I get the row height off the main table the same ?
also how can I get the nested table lower without making the fontsize too small?