表列隱藏/顯示

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％

你提到的表100％的是第一個TD的10％第二個td是90％，現在第三個td是多少？

因此請檢查您的td％並嘗試與總的％進行比較。

我在10％+ 80％+ 10％

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

這裏是更新的樣本分配100％。

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

Answer 2

你只需要減少第二<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>