隐藏/显示行时表格列改变大小

Question

对不起标题，我真的不知道如何更好地表达我的问题，但这里有一个更详细的描述：

我有一个表，其中有一堆行，用于跟踪待办事项列表意义上的任务，并且可以单击行本身以显示嵌入其中一个列的表以跟踪子-任务。当我单击其中一项任务以显示子任务时，列的宽度会发生变化。我有以下演示：

如果您仔细查看第一行和表格标题，则列宽正在发生变化。我用检查员检查了这个，它显示为“测试移位输入”它只改变了 1px，而对于“测试移位输入和按钮”，变化更加剧烈。

相关的演示是here。代码将在下面发布。我想知道：

1. 为什么会发生这种情况 - 我怀疑它与子任务表的宽度有关？但如果我弄错了，请纠正我。

2. 如何解决这个问题，尽可能多地保留当前结构。我可能可以使用 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;
}

Answer 1

您只需要将第二个<td>元素的宽度减小90%，然后将宽度分配给第三个<td element>，这样三个<td>元素的总宽度就可以达到100%；

这是更新后的fiddle。我已将第三个<td> 元素的宽度设置为 5%，但您应该将其设置为等于按钮的宽度。

<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>