<link href="style.css" type="text/css" rel="stylesheet">


<table class="strategies">

    <tr>
        <td class="first">
            <table class="docinfo">
                <tr><td rowspan=2><img src="doc.png" /></td><td>Jack Johnson</td></tr>
                <tr><td>24th March 2016</td></tr>
            </table>
        </td>
        <td class="second">hahaha</td>
        <td class="third">blabla</td>
    </tr>
    <tr>
        <td class="first">
            fsfsd
        </td>
        <td class="second">hahaha</td>
        <td class="third">blabla</td>
    </tr>

</table>

.strategies{
    table-layout: fixed;
    border: 1px forestgreen solid;

}
td {
    border:1px solid red;
    height:20px;
}

.strategies .first {
    width: 40%;
}
.strategies .second {
    width: 50%;
}
.strategies .third {
    width: 10%;
}

.docinfo
{
    height:50px;
    font-size:8px;
}

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?