The shared HTML markup won't work because the child table is in a row with only one td and no colspan... Here is how, I think, the markup should look like (demo):
HTML (showing only one entry)
<table class="tablesorter" id="maintbl">
<thead>
<th>id</th>
<th>name</th>
<th>phone</th>
</thead>
<tbody>
<!-- one parent + child row containing a child table -->
<tr>
<td>1</td>
<td>vasu</td>
<td>4562789</td>
</tr>
<tr class="tablesorter-childRow">
<td colspan="3">
<table class="childtbl">
<thead>
<th>Role</th>
<th>Status</th>
<th>Submitted</th>
</thead>
<tbody>
<tr>
<td>admin</td>
<td>completed</td>
<td>yes</td>
</tr>
<tr>
<td>user</td>
<td>notcompleted</td>
<td>no</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Script
$(function(){
$('#maintbl').tablesorter({
theme: 'blue',
sortList: [[1, 0]],
widgets: ['zebra', 'columns']
});
$('.childtbl').tablesorter({
theme: 'blue',
sortList: [[0, 0]],
widgets: ['zebra', 'columns']
});
});