固定表格中的列宽，可以搜索和隐藏哪些列答案

【问题标题】：Fixed columns width in a table which columns can be searched and hidden固定表格中的列宽，可以搜索和隐藏哪些列
【发布时间】：2016-07-25 13:33:43
【问题描述】：

如何将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

【问题讨论】：

标签： html css angularjs

【解决方案1】：

这是一种方法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="angular.js@1.2.x"></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>

【讨论】：

我希望表格始终为 100% 宽度。我只想在没有结果时不改变列的宽度