Table columns changing size when hiding/showing row - html

Question

Sorry for the title, I don't really know how to better phrase my question, but here is a more detailed description:
I have a table that has a bunch of rows that is used to keep track of tasks in a todo list sense, and the rows themselves can be clicked on to show a table embedded within one of their columns to keep track of sub-tasks. When I click on one of the tasks to show the subtasks, the width of the column changes. I have the following demonstration:
If you look closely at the first row and the table header, the colum width is changing. I checked this with inspector and it appears for "test shift input" it changes only 1px, whereas for "test shift input and button" the change is more drastic.
The relevant demo is here. And the code will be posted below. I want to know:
Why this happens - I suspect it is width related from the subtasks table? But please correct me if I'm mistaken.
How to fix this, keeping as much of the current structure as possible. I could probably rewrite the whole thing using divs instead of table but it would be nice to not have to do that.
Thanks in advance.
The HTML:
<div>
<table class="table">
<thead>
<tr>
<th><i class="glyphicon glyphicon-check"></i></th>
<th>Task</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td width="10%">
<input type="checkbox" ng-model="item.checked" class="ng-pristine ng-untouched ng-valid">
</td>
<td width="90%">
<input class="form-control ng-pristine ng-untouched ng-valid" ng-model="item.name">
</td>
<td>
<button class="btn btn-primary btn-responsive" ng-click="addItem()"><i class="glyphicon glyphicon-plus"></i></button>
</td>
</tr>
<tr>
<td colspan="3" style="padding:0">
<div class="dataTableContainer" style="height:460px;overflow:auto">
<table class="table">
<tbody>
<tr ng-repeat="thisTodo in todoList track by $index" class="ng-scope">
<td width="10%">
<input type="checkbox" ng-model="thisTodo.checked" ng-click="checked(thisTodo._id,thisTodo.checked)" class="ng-pristine ng-untouched ng-valid">
</td>
<td width="90%">
<div for="0" class="checked-false" onclick="$('#test1').toggle()">
Test shift input and button
</div>
<table id="test1" class="table">
<thead>
<tr>
<th width="10%"><i class="glyphicon glyphicon-check"></i></th>
<th>Subtask</th>
<th></th>
</tr>
</thead>
<tbody><tr>
<td>
<input type="checkbox" ng-model="thisTodo.subItem.checked" class="ng-pristine ng-untouched ng-valid">
</td>
<td>
<input class="form-control ng-valid ng-dirty ng-touched" ng-model="thisTodo.subItem.name">
</td>
<td>
<button class="btn btn-primary btn-responsive" ng-click="addSubItem(thisTodo)"><i class="glyphicon glyphicon-plus"></i></button>
</td>
</tr>
<!-- ngRepeat: subtask in thisTodo.subtasks --><tr ng-repeat="subtask in thisTodo.subtasks" class="ng-scope">
<td>
<input type="checkbox" ng-model="subtask.checked" ng-click="checkedSubtask(thisTodo._id,subtask._id,subtask.checked)" class="ng-pristine ng-untouched ng-valid">
</td>
<td>
<div class="checked-false">
Test
</div>
</td>
<td>
<button class="btn btn-danger btn-responsive" ng-click="removeSubItem(thisTodo._id,subtask._id)"><i class="glyphicon glyphicon-trash"></i></button>
</td>
</tr><!-- end ngRepeat: subtask in thisTodo.subtasks --><tr ng-repeat="subtask in thisTodo.subtasks" class="ng-scope">
<td>
<input type="checkbox" ng-model="subtask.checked" ng-click="checkedSubtask(thisTodo._id,subtask._id,subtask.checked)" class="ng-pristine ng-untouched ng-valid">
</td>
<td>
<div class="checked-false">
loalsdfjalskdjfalkjfaasdf
</div>
</td>
<td>
<button class="btn btn-danger btn-responsive" ng-click="removeSubItem(thisTodo._id,subtask._id)"><i class="glyphicon glyphicon-trash"></i></button>
</td>
</tr><!-- end ngRepeat: subtask in thisTodo.subtasks -->
</tbody></table>
</td>
<td>
<button class="btn btn-danger btn-responsive" ng-click="remove(thisTodo._id)"><i class="glyphicon glyphicon-trash"></i></button>
</td>
</tr><tr ng-repeat="thisTodo in todoList track by $index" class="ng-scope">
<td width="10%">
<input type="checkbox" ng-model="thisTodo.checked" ng-click="checked(thisTodo._id,thisTodo.checked)" class="ng-pristine ng-untouched ng-valid">
</td>
<td width="90%">
<div for="1" class="checked-false" onclick="$('#test2').toggle()">
Test shift input
</div>
<table id="test2" class="table">
<thead>
<tr>
<th width="10%"><i class="glyphicon glyphicon-check"></i></th>
<th>Subtask</th>
<th></th>
</tr>
</thead>
<tbody><tr>
<td>
<input type="checkbox" ng-model="thisTodo.subItem.checked" class="ng-pristine ng-untouched ng-valid">
</td>
<td>
<input class="form-control ng-pristine ng-valid ng-touched" ng-model="thisTodo.subItem.name">
</td>
<td>
<button class="btn btn-primary btn-responsive" ng-click="addSubItem(thisTodo)"><i class="glyphicon glyphicon-plus"></i></button>
</td>
</tr>
<!-- ngRepeat: subtask in thisTodo.subtasks -->
</tbody></table>
</td>
<td>
<button class="btn btn-danger btn-responsive" ng-click="remove(thisTodo._id)"><i class="glyphicon glyphicon-trash"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
The CSS:
.table{
width:100%;
table-layout: inherit;
}
.checked-false {
color: black;
background-color: rgba(255, 255, 0, 0.25);
border-radius: 10px;
margin: 5px
}
#test1, #test2 {
display:none;
}

Answer 1

I guess its problem with your td %
You have mentioned table 100% out of that 1st td is 10% and second td is of 90% now what about third td % it will be extra right?
So check your td % and try to match with total %.
I distribute 100% in 10% + 80% + 10%
<tr>
<td width="10%">
<input type="checkbox" ng-model="item.checked" class="ng-pristine ng-untouched ng-valid">
</td>
<td width="80%">
<input class="form-control ng-pristine ng-untouched ng-valid" ng-model="item.name">
</td>
<td>
<button class="btn btn-primary btn-responsive" ng-click="addItem()"><i class="glyphicon glyphicon-plus"></i></button>
</td>
</tr>
here is an updated sample.
https://jsfiddle.net/ccrwj998/1/

Answer 2

You just need to reduce the width of the 2nd <td> element with 90% width and assign width to the 3rd <td element> so that the total width of the three <td> elements sum up to 100%;
Here is the updated fiddle. I have set the width here to 5% for the 3rd <td> element, but you should set it equal to the width of the button.
<tr>
<td width="10%">
<input type="checkbox" ng-model="item.checked" class="ng-pristine ng-untouched ng-valid">
</td>
<td width="85%">
<input class="form-control ng-pristine ng-untouched ng-valid" ng-model="item.name">
</td>
<td width="5%">
<button class="btn btn-primary btn-responsive" ng-click="addItem()"><i class="glyphicon glyphicon-plus"></i></button>
</td>
</tr>