CSSブートストラップ固定ヘッダ

Question

は、ブートストラップのようにテーブルを作成することは可能です：

• 固定ヘッダをし、スクロール可能なコンテンツのようなhere列がproportionaly列の内容にサイズに必要
• （広いですコンテンツオン/小さいカラムdepanding）
• スクロール可能なx軸
• 列がminとmax幅

を有していて表示することができる複数のカラムなら

これまでのところ、フレックスアプローチで正確にサイズを決めるために列の数を知る必要があるのは、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を宣言することができることを言及するのを忘れてしまいました。