tbody in table is not as per thead in table - css

Question

My tbody of table is not as per thead of table.
table {
width: 100%;
}
tbody {
display: block;
max-height: 160px;
overflow-y: scroll;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table id="myHeader" class="scroll table table-striped table-hover table-bordered table-responsive">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th class="mobiile">Document</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
[userName]
</td>
<td>
[userProfession]
</td>
<td class="mobiile"><iframe id="myHeader" src="https://i.stack.imgur.com/Pnq8a.jpg" width="250px" height="250px"></iframe></td>
<td>
<div class="dropdown">
<button class="dropbtn">Action</button>
<div class="dropdown-content">
<a class="btn btn-primary" href="user_images/['userPic']"><span class="glyphicon glyphicon-eye-open"></span> View</a>
<p id="i['userID']" style="display: none;">
['userPic']
</p>
<button onclick="copyToClipboard('#i['userID']')" class="btn btn-primary"><span class="glyphicon glyphicon-eye-open"></span> Share</button>
<script>
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
$("<div class='alert alert-success'>Copied url of image: <font color='blue'>[userName]</font>! </div>").insertBefore('#cr').delay(3000).fadeOut();
}
</script>
<a class="btn btn-success" href="user_images/['userPic']" title="Download [userName]" download><span class="glyphicon glyphicon-download"></span> Download</a>
<a class="btn btn-info" href="editform.php?edit_id=['userID']" title="click for edit"><span class="glyphicon glyphicon-edit"></span> Edit</a>
<a class="btn btn-danger" href="?delete_id=['userID']" title="click for delete" onclick="return confirm('sure to delete ?')"><span class="glyphicon glyphicon-remove-circle"></span> Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>