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的{{1}}正在改变单元格的宽度并重新调整它，th来到我的救援，然后我也将visibility: hidden应用到我的搜索栏。

可以找到更新的小提琴here。

将表头替换为搜索栏而不调整表体

1 个答案: