使用Angular JS拖放UI樹時表格寬度會縮小

我正在嘗試使用Angular JS ui樹爲表創建拖放操作。使用Angular JS拖放UI樹時表格寬度會縮小

下面是表：

拖放工作正常，但我的表格寬度萎縮，同時拖動如圖所示高度incresing：

這裏是我的HTML代碼：

<div style="width: 31%; float: left; margin-right: 12px;"> 

    <table data-ui-tree="treeOptions" id="tree-root" class="smallTable"> 
    <col width=10> 
     <col width=30> 
     <col width=100> 
      <col width=20> 
      <tr class="heading"> 
       <th colspan="4">Test</th> 

      </tr> 
      <tr class="columnsHeading"> 
       <th></th> 
       <th>Col1</th> 
       <th>Col2</th> 
       <th><span class="glyphicon glyphicon-plus-sign" ng-click="showNewtestRow()" style="color: #428bca; padding-left: 10px;"></span></th> 
      </tr> 
      <tbody ui-tree-nodes ng-model="tests"> 
       <tr ng-repeat="test in tests" ui-tree-node> 
       <td><span class="glyphicon glyphicon-resize-vertical" ui-tree-handle></span> </td> 
       <td calss="smallTableColumn1" data-ng-hide="test.isEditable">{{test.testId}}</td> 
       <td calss="smallTableColumn2" data-ng-hide="test.isEditable">{{test.testName}}</td> 
       <td><span class="glyphicon glyphicon-edit" ng-click="showEdittestRow(test)" data-ng-hide="test.isEditable" style="color: rgb(66, 139, 202);"></span> <span class="glyphicon glyphicon-trash" ng-click="showtestConfirm(test)" data-ng-hide="test.isEditable" 
        style="color: rgb(66, 139, 202);"></span> <span data-ng-show="test.isEditable" class="glyphicon glyphicon-floppy-save" ng-click="updatetest(test)" style="color: rgb(66, 139, 202);"></span> <span data-ng-show="test.isEditable" class="glyphicon glyphicon-remove-sign" 
        ng-click="cancelEdittestRow(test)" style="color: red;"></span></td> 
       </tr> 
      </tbody> 
    </table> 
</div>

我不知道我出錯的地方。請幫幫我。在此先感謝。

來源

2016-07-16 Shruthi Sathyanarayana

Shruthi，我看到山坳寬度語法錯誤，應該是山坳寬度=「10」，引號失蹤。希望這對你有用:) –

@Naga Sai A，我也一樣。但它不工作。仍然是同樣的問題。 –

嘗試添加用於表格的CSS作爲表格{layout：fixed} –

實現你預期的結果，添加引號山坳寬度

  <table data-ui-tree="treeOptions" id="tree-root" class="smallTable"> 
       <col width="10"> 
       <col width="30"> 
       <col width="100"> 
       <col width="20">

來源

2016-07-16 06:49:22

使用Angular JS拖放UI樹時表格寬度會縮小

回答

相關問題