angularjs - 不调整表体，用搜索栏替换表头

Question

我正在尝试在 HTML 表格中实现搜索。搜索栏在事件时应替换表格标题。当我完成后，标题应该会回来。

可以看到这个的 JSFiddle here

问题是当我切换到搜索模式时，我的表体重新调整，我相信这是因为标题消失了。因为，如果我决定保持标题完好无损，那么问题就不存在了。如何绕过它？我们无法固定单元格的宽度。但可以给出相对宽度(em 和 %)。

感谢任何帮助。如果需要更多信息，请告诉我。

HTML 代码

<div ng-app>
    <div ng-controller="SearchCtrl">
    <table>
        <thead>
            <tr class="search" ng-show="showSearch()">
                <th colspan="3">
                    <input type="text" ng-model="searchStr" placeholder="Enter Name">        
                </th>
            </tr>
            <tr class="header" ng-hide="showSearch()">
<!-- If we were to show the header, the table doesn't readjust -->
<!--       <tr class="header"> -->
                <th>Name</th>
                <th>Age</th>
                <th>Class</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in rows">
                <td>{{row.name}}</td>
                <td>{{row.age}}</td>
                <td>{{row.class}}</td>
            </tr>
        </tbody>
    </table>
    <div class="search-control">
            <input class="btn-primary" type="submit" value="Show Search" ng-click="ifSearch = true">
            <input class="btn-primary" type="submit" value="Close Search" ng-click="ifSearch = false">
    </div>
        <div class="debug">
            You Searched for: {{searchStr}}    
        </div>
</div>

CSS 代码

thead tr, tbody tr {
    border-bottom: 1px solid black;
    width: 100%;
}
th, td {
    padding: 10px;
}

.search-control, .debug {
    margin-top: 20px;
}

AngularJS 代码

function SearchCtrl($scope) {
    $scope.ifSearch = false;
    $scope.searchStr = '';
    $scope.rows = [{
        name: 'John',
        age: 10,
        class: 6
    },{
        name: 'Anthony',
        age: 9,
        class: 4
    },{
        name: 'Xavier',
        age: 11,
        class: 8
    }]
    $scope.showSearch = function () {
        return $scope.ifSearch;
    };
}

更新:我已经添加了这个问题的答案below .但其中的问题是它在 Chrome 中行为不端，但在 Firefox/Safari 中按预期工作。在 chrome 中，搜索栏下方的边框消失了。虽然它存在于其他浏览器中。有任何想法吗？了解这一点对我来说比知道如何解决这个问题更重要!

Answer 1

由于 display: none for th 正在改变单元格的宽度并重新调整它，visibility: hidden 来拯救我然后我还将 position: absolute 应用于我的搜索栏。

可以找到更新的 fiddle here .