javascript - 使用 Angular JS 中的拖放 ui-tree 时表格宽度正在缩小

Question

我正在尝试使用 Angular JS ui 树为表格创建拖放操作。

这是表格:

拖放工作正常，但我的表格宽度在缩小并且在拖动时高度在增加，如图所示:

这是我的 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>

我不知道我哪里错了。请帮我。提前致谢。

Answer 1

为达到预期结果，请在列宽度上添加引号

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