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;

http://ift.tt/1HDmj4z

thead.panel-heading {
    background-color: #242a30;
    border-color: #242a30;
    border-bottom: 1px solid #242a30;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    cursor: move;
    width: 100%;
}
thead.panel-heading tr th {
    color: #ffffff;
    font-weight: 500;
    padding: 10px 40px !important;
    text-align: left;
}
tbody.panel-content {
    background-color: #f0f3f4;
}
tbody.panel-content tr td {
    padding: 10px 20px !important;
    text-align: left;
}
tbody div {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 300px;
}

<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>