对不起标题，我真的不知道如何更好地表达我的问题，但这里有一个更详细的描述:
我有一个表格，上面有一堆行，用于跟踪待办事项列表中的任务，可以单击这些行本身以显示嵌入其中一列的表格，以跟踪子任务-任务。当我单击其中一项任务以显示子任务时，列的宽度会发生变化。我有以下演示:
如果您仔细观察第一行和表头，就会发现列宽正在发生变化。我和检查员一起检查了这个，它似乎对于“测试移位输入”它只改变了 1px，而对于“测试移位输入和按钮”，变化更加剧烈。
相关演示为here .代码将在下面发布。我想知道:
为什么会发生这种情况 - 我怀疑它与子任务表的宽度有关？但是，如果我弄错了，请纠正我。
如何解决这个问题，尽可能多地保留当前结构。我可能可以使用 divs 而不是 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;
}
最佳答案
我猜你的 td % 有问题
您提到表 100% 的第一个 td 是 10%，第二个 td 是 90% 现在第三个 td % 会额外吗？
所以检查你的 td % 并尝试与 total % 匹配。
我在 10% + 80% + 10% 中分配 100%
<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>
这是一个更新的示例。
关于html - 隐藏/显示行时表格列改变大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40360682/