CSS引导固定报头

Question

是否有可能在自举来创建一个表：

• 固定报头和滚动能够含量等here
• 的列需要大小proportionaly到各列的内容（较宽内容/小柱depanding）
• 涡旋能够x轴如果可以显示
• 列更多的列具有最小和最大宽度

到目前为止，我只找到了一个解决方案，需要通过类似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里面你可以设置一个固定的宽度，如果需要申报滚动-X。