0
行
很抱歉的标题时改变大小，我真的不知道如何更好的短语我的问题，但这里是一个更详细的描述：我表列隐藏/显示
有有一堆表用于跟踪待办事项列表意义上的任务的行，并且可以单击这些行以显示嵌入其列之一中的表以跟踪子任务。当我点击其中一个任务来显示子任务时，列的宽度会发生变化。我有以下演示：
如果仔细观察第一行和表头，则列宽将发生变化。我用检查员检查了它，它显示“测试换档输入”它只改变1px，而“测试换档输入和按钮”则改变更剧烈。相关演示here。代码将在下面发布。我想知道：
为什么发生这种情况 - 我怀疑它是从子任务表中的宽度相关？但是如果我错了，请纠正我。
如何解决这个问题，尽可能多地保持当前结构。我可能可以用div而不是table重写整个事物，但是不必那样做。
在此先感谢。
的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>
的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;
}
我再次检查出来，与上面的第一个答案类似的评论。 –
好吗你是否验证过https://jsfiddle.net/ccrwj998/1/ – user3249448