使表100％與智能表角固定頭

http://plnkr.co/edit/GIeXoF?p=preview 使表100％與智能表角固定頭

我怎樣才能讓這臺以100％的高度的高度，但仍然頭必須保持固定的嗎？

<!DOCTYPE html> 
<html ng-app="myApp"> 

    <head> 
    <link data-require="[email protected]" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> 
    <script data-require="[email protected]" data-semver="1.2.25" src="https://code.angularjs.org/1.2.25/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    <script src=smart-table.debug.js></script> 
    </head> 

    <body ng-controller="mainCtrl"> 
    <table class="table table-striped"> 
    <thead> 
    <tr> 
     <th st-ratio="20" st-sort="firstName">first name</th> 
     <th st-ratio="20" st-sort="lastName">last name</th> 
     <th st-ratio="10" st-sort="age">age</th> 
     <th st-ratio="30" st-sort="email">email</th> 
     <th st-ratio="20" st-sort="balance">balance</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="row in displayed"> 
     <td st-ratio="20">{{row.firstName}}</td> 
     <td st-ratio="20">{{row.lastName | uppercase}}</td> 
     <td st-ratio="10">{{row.age}}</td> 
     <td st-ratio="30">{{row.email}}</td> 
     <td st-ratio="20">{{row.balance | currency}}</td> 
    </tr> 
    </tbody> 
    <tfoot> 
    <tr> 
     <td colspan="5" class="text-center"> 
      <div st-items-by-page="20" st-pagination=""></div> 
     </td> 
    </tr> 
    </tfoot> 
</table> 

    </body> 

</html> 

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; 
}

來源

2015-04-06 Elisabeth

我在這一點。如果您發現問題，您可以評論解決方案嗎？ – mggSoft

我找到的解決方案是創建僅包含標題另一個表，所以當我在假頭CLIC拋出一個JS不是在智能表頭火災CLIC事件。這樣你可以使用de st-sort指令。這是一個骯髒的解決方案，但工程。我的例子有100％的寬度，並沒有100％的高度，但我希望這可以幫助你的頭。

<table id="tableHeader" class="table-condensed"> 
      <thead> 
       <tr role="rowheader"> 
        <!--<i class="fa fa-sort"></i>--> 
        <th class="sorting" st-ratio="10" onclick="fire_clic(1)">IdCustomer<i class="icon-sort icon-small"></i></th> 
        <th class="sorting" st-ratio="35" onclick="fire_clic(2)">Name<i class="icon-sort icon-small"></i></th> 
        <th st-ratio="15">Nif</th> 
        <th class="sorting" st-ratio="15" onclick="fire_clic(4)">Phone<i class="icon-sort icon-small"></i></th> 
        <th class="sorting" st-ratio="25" onclick="fire_clic(5)">Email <i class="icon-sort icon-small"></i></th> 
       </tr> 
      </thead> 
     </table> 

     <div class="table-container"> 

      <table st-persist="tableLS" st-table="customers" st-safe-src="rowCustomerCollection" st-pagination-scroll st-pipe="callServer" 
        class="table table-striped table-hover table-condensed"> 

       <thead data-ng-hide="true"> 
        <tr> 
         <th id="col1" st-ratio="10" st-sort="IdCustomer">ID</th> 
         <th id="col2" st-ratio="35" st-sort="nom">Name</th> 
         <th st-ratio="15">Nif</th> 
         <th id="col4" st-ratio="15" st-sort="tel">Phone</th> 
         <th id="col5" st-ratio="25" st-sort="dPer3">Email</th> 
        </tr> 
       </thead> 

       <tbody> 
        <tr data-ng-repeat="c in customer"> 
         <td st-ratio="10" title="Go to customer" class="irA" data-ng-click="open(c.idCustomer)"> 
          {{c.idCustomer}} 
         </td> 
         <td st-ratio="35">{{c.nom}}</td> 
         <td st-ratio="15">{{c.nif}}</td> 
         <td st-ratio="15">{{c.phone}}</td> 
         <td st-ratio="25">{{c.dPer3}}</td> 
        </tr> 
       </tbody> 

      </table> 

     </div> 

<script> 
     function fire_clic(id, elem) { 
     var idControl = 'th[id=col' + id + ']'; 

     //Fire the clic event in smart-table 
     $(idControl).trigger('click'); 
    } 
</script>

CSS：

#tableHeader { 
    width: 100%; 
} 

.table-container { 
    height: 500px; 
    width: 100%; 
    overflow-y: scroll; 
    white-space: nowrap; 
    font-size: small; 
    align-items: stretch; 
} 

.table-condensed > tbody > tr > td { 
    padding: 2px; 
}

來源

2015-04-24 07:55:46 mggSoft

500px！= 100％身高。也許你應該改變你的頭銜。 –

我已經改變了解釋。謝謝你通知我。 – mggSoft

使表100％與智能表角固定頭

回答

相關問題