Scrollable table contents html/css - html

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

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>

Answer 2

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>