Scrollable table contents html/css

I'm trying to make my table contents scrollable, I've had to create a table inside one of the table rows which means if the table has more than one row the contents isn't aligned with the correct heading as showing in the fiddle;

<table>
    <thead class="panel-heading">
        <tr>
            <th>Client</th>
            <th>Client</th>
        </tr>
    </thead>
    <tbody class="panel-content">
        <tr>
            <td>
                <div class="scrollit">
                    <table>
                        <tr>
                            <td>Alex Best</td>
                            <td>Yahoo Answers</td>
                        </tr>
                        <tr>
                            <td>Andrew Smith</td>
                            <td>Monkey Tube</td>
                        </tr>
                        <tr>
                            <td>James Harris</td>
                            <td>Limewire</td>
                        </tr>
                        <tr>
                            <td>Mike Anderson</td>
                            <td>Twitter</td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </tbody>
</table>

tbody div{
     overflow-x: hidden;
     overflow-y: scroll;
     height: 300px;
}

http://ift.tt/1HDmj4z