列表中可以搜索和隱藏的固定列寬度

如何將width應用於table列，以避免在列中未找到結果時更改列width。此table中的列也可以動態隱藏，因此我無法在th元素上設置固定寬度。列表中可以搜索和隱藏的固定列寬度

<table> 
     <thead> 
     <tr> 
      <th>col1</th> 
      <th>col2 <i>Filter:</i> <input type="text" ng-model="searchText"></th> 
      <th ng-hide="hideCol3">col3 <button ng-click="hideCol3 = !hideCol3">Hide column</button></th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr ng-repeat="d in data | filter: searchText"> 
      <td>{{d.col1}}</td> 
      <td>{{d.col2}}</td> 
      <td ng-hide="hideCol3">{{d.col3}}</td> 
     </tr> 
     </tbody> 
    </table>

表中的列可能是hidden。因此，例如，如果我去plunker示例，隱藏col3，並搜索沒有現有的文本，可以說'abc'表的列寬度變化的width。

我想表調整寬度時，一些列是隱藏的（它現在這樣做），但是當我過濾和有沒有結果，我不希望列的寬度改變

plunker

來源

2016-07-25 jonasnas

這裏是一個辦法做到這一點https://jsfiddle.net/kblau237/qkn1z0LL/2/

<!DOCTYPE html> 

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>NNIndex</title> 
    <script src="~/Scripts/jquery-1.9.1.min.js"></script> 
    <script data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js" data-require="[email protected]"></script> 
    <script src="~/Scripts/app.js"></script> 
    <style> 
     th, td { 
      border: 1px solid black; 
     } 

     table { 
      width: 100%; 
     } 
    </style> 
    <script type="text/javascript"> 
     $(function() { 
      //http://stackoverflow.com/questions/1636201/is-the-order-objects-are-return-by-a-jquery-selector-specified 
      var cols = $(".manageWidth"); //access each ids with [0]..[2] usejquery each 
      $.each(cols, function (index, value) { 
       $('<input>').attr({ 
        type: 'hidden', 
        class: 'hdnDyn', 
        id: "hdnDyn" + index, 
        value: window.getComputedStyle(cols[index], null).getPropertyValue("width") 
       }).appendTo('body'); 

      }); 

      $("input").keyup(function() { 
       KeepWidthSame(); 
      }); 

      $(".col3").click(function() { 
       KeepWidthSame(); 
      }); 

      function KeepWidthSame() { 
       $("table").css("width", "auto"); 
       var cols = $(".manageWidth"); 
       $.each(cols, function (index, value) { 
        $(this).css("width", $(".hdnDyn")[index].value); 
       }); 
      } 
     }) 

    </script> 
</head> 
<body ng-app="plunker" ng-controller="MainCtrl"> 
    <table> 
     <thead> 
      <tr> 
       <th class="manageWidth">col1</th> 
       <th class="manageWidth">col2 <i>Filter:</i> <input type="text" ng-model="searchText"></th> 
       <th class="manageWidth col3" ng-hide="hideCol3">col3 <button ng-click="hideCol3 = !hideCol3">Hide column</button></th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="d in data | filter: searchText"> 
       <td>{{d.col1}}</td> 
       <td>{{d.col2}}</td> 
       <td ng-hide="hideCol3">{{d.col3}}</td> 
      </tr> 
     </tbody> 
    </table> 
</body> 
</html>

來源

2016-07-25 17:38:00 kblau

我想表永遠是100％的寬度。我只想在沒有結果時不改變列的寬度 – jonasnas

列表中可以搜索和隱藏的固定列寬度

回答

相關問題