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