Scrollable table contents html/css

Question

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;

https://jsfiddle.net/f5ax5w2r/

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>

Answer 1

Try adding colspan="2" to the td which has table inside.

https://jsfiddle.net/f5ax5w2r/

                            <table>
                                <thead class="panel-heading">
                                    <tr>
                                        <th>Client</th>
                                        <th>Client</th>
                                    </tr>
                                </thead>
                                <tbody class="panel-content">
                                    <tr>
                                        <td colspan="2">
                                            <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>

Answer 2

The number of table cells do not match in each table row in your code. Adding the correct colspan value should do it.

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 colspan="2">
                <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>