Question

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

我有一个包含一堆行的表，用于以todo列表的形式跟踪任务，并且可以单击行本身以显示嵌入其中一列中的表以跟踪sub -任务。当我单击其中一个任务以显示子任务时，列的宽度会发生变化。我有以下演示：

如果仔细查看第一行和表格标题，则列宽正在变化。我用检查员检查了它，它出现在＆＃34;测试班次输入＆＃34;它仅改变1px，而对于＆＃34;测试移位输入和按钮＆＃34;变化更加激烈。

相关演示为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;
}

Answer 1

我猜你的td％

有问题

你提到表100％，第一个td是10％，第二个td是90％，那么第三个td％会是额外的权利吗？

因此请检查您的td％并尝试与总％匹配。

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

这是一个更新的样本。

https://jsfiddle.net/ccrwj998/1/

Answer 2

您只需缩小宽度为90％的第二个<td>元素的宽度，并为第三个<td element>分配宽度，以便总计三个<td>元素的总宽度到100％;

以下是更新后的fiddle。我已将第3个<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>

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

2 个答案: