CSS Bootstrap 固定 header

Question

是否可以在 bootstrap 中创建一个表:

• 固定标题和可滚动内容，如 here
• 列的大小需要与列的内容成比例(更宽/更小的列取决于内容)
• 如果可以显示更多列，则可滚动 x 轴
• 列有最小和最大宽度

到目前为止，我只找到了一个解决方案，它需要知道列数才能使用 flex 方法(如 here)正确调整大小。 .

table {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 500px; /* this can vary */
}

table * {
    box-sizing: inherit;
    -moz-box-sizing: inherit;
}

thead {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

tbody {
    overflow-y: scroll;
    display: inline-block;
}

thead > tr, tbody > tr, tfoot > tr {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

thead, tfoot {
    flex-shrink: 0;
}

th, tbody td {
    width: 20%; /* this can vary */
    overflow-x: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

tfoot {
    display: inline-block;
}

tfoot td {
    width: 100%;
    display: inline-block;
}

Answer 1

其中包含您可能正在寻找的示例。我还介绍了如何实现过滤和排序。请记住，我只是把它放在一起，所以我没有时间测试任何东西，但这大概就是您可能正在寻找的东西的想法？

HTML 文件:

                <div class="wrapTable">
                        <table class="head table-bordered">
                            <thead>
                                <tr>
                                    <td ng-click="sortType = 'id'; sortReverse = !sortReverse">
                                        Id
                                        <span ng-show="sortType == 'id' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                                        <span ng-show="sortType == 'id' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                                    </td>
                                    <td ng-click="sortType = 'name'; sortReverse = !sortReverse">
                                        Name
                                        <span ng-show="sortType == 'name' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                                        <span ng-show="sortType == 'name' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                                    </td>
                                </tr>
                            </thead>
                            <tr>
                                <td><input ng-model="dataText.id"></td>
                                <td><input ng-model="dataText.name"></td>
                            </tr>                                   
                        </table>
                            <div class="scrollableBody">
                                <table class="table table-bordered table-striped">
                                    <tbody>
                                        <tr ng-repeat="data in dataList | orderBy:sortType:sortReverse| filter:dataText">
                                            <td>{{data.id}}</td>
                                            <td>{{data.name}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                    </div>


                    <script>
                    $scope.sortReverse = false;
                    $scope.sortType = 'id'; // set the default sort type
                    $scope.dataText = '';
                    $scope.dataList=....some dynamic JSON data request
                    </script>

CSS 文件:

.wrapTable {
    height: 100%;
    overflow-x: auto;
}

.wrapTable table { /*set wrap for table*/
    max-width: 10000px;
    table-layout: fixed;
    width: 100%;
    display: inline-table;

}

table tr td {
    margin: 0;
    padding: 5px;
    width: 200px; /*width of each column*/
    word-wrap: break-word;
}

table.head tr td {
    background: #000000;
    color: white;
    height: 40px;
}

.scrollableBody {

    height: 550px;
    min-width: inherit;

    overflow-y: scroll !important;
    position: absolute; /* <-- here is what is important*/
}

.scrollableBody::-webkit-scrollbar {
    width: 0em;
    height: 2em;
}

我忘了说在 wrapTable 里面你可以设置一个固定的宽度，如果需要可以声明 scrollable-x。