Question

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

修正了标题和可滚动的内容，例如here
列需要根据列的内容按比例调整大小（更宽/更小列的内容删除）
如果可以显示更多列
列具有最小和最大宽度

到目前为止，我发现只有一个解决方案需要通过像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。

CSS Bootstrap固定标头

1 个答案: