title: smart table angularjs module fixed table header is not working on safari
body: <p>I am using smart table angular js based module. I implemented this module in my project and realized its not rendering properly on safari. Then I went through the example given on smart table site and realized that sample example given there is also having problem on safar. Following is plunker having fixed table header code sample. </p>
  
  <pre><code>http://plnkr.co/edit/fcdXKE?p=preview
  </code></pre>
  
  <p>HTML Markup</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="myApp"&gt;
  
    &lt;head&gt;
      &lt;link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /&gt;
      &lt;script data-require="angular.js@1.2.25" data-semver="1.2.25" src="https://code.angularjs.org/1.2.25/angular.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
      &lt;script src=smart-table.debug.js&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body ng-controller="mainCtrl"&gt;
      &lt;table st-table="displayed" class="table table-striped"&gt;
      &lt;thead&gt;
      &lt;tr&gt;
          &lt;th st-ratio="20" st-sort="firstName"&gt;first name&lt;/th&gt;
          &lt;th st-ratio="20" st-sort="lastName"&gt;last name&lt;/th&gt;
          &lt;th st-ratio="10" st-sort="age"&gt;age&lt;/th&gt;
          &lt;th st-ratio="30" st-sort="email"&gt;email&lt;/th&gt;
          &lt;th st-ratio="20" st-sort="balance"&gt;balance&lt;/th&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;tr ng-repeat="row in displayed"&gt;
          &lt;td st-ratio="20"&gt;{{row.firstName}}&lt;/td&gt;
          &lt;td st-ratio="20"&gt;{{row.lastName | uppercase}}&lt;/td&gt;
          &lt;td st-ratio="10"&gt;{{row.age}}&lt;/td&gt;
          &lt;td st-ratio="30"&gt;{{row.email}}&lt;/td&gt;
          &lt;td st-ratio="20"&gt;{{row.balance | currency}}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;tfoot&gt;
      &lt;tr&gt;
          &lt;td colspan="5" class="text-center"&gt;
              &lt;div  st-items-by-page="20" st-pagination=""&gt;&lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tfoot&gt;
  &lt;/table&gt;
  
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>script.js</p>
  
  <pre><code>angular.module('myApp', ['smart-table'])
      .controller('mainCtrl', ['$scope', function ($scope) {
  
          var
              nameList = ['Pierre', 'Pol', 'Jacques', 'Robert', 'Elisa'],
              familyName = ['Dupont', 'Germain', 'Delcourt', 'bjip', 'Menez'];
  
          function createRandomItem() {
              var
                  firstName = nameList[Math.floor(Math.random() * 4)],
                  lastName = familyName[Math.floor(Math.random() * 4)],
                  age = Math.floor(Math.random() * 100),
                  email = firstName + lastName + '@whatever.com',
                  balance = Math.random() * 3000;
  
              return{
                  firstName: firstName,
                  lastName: lastName,
                  age: age,
                  email: email,
                  balance: balance
              };
          }
  
  
          $scope.displayed = [];
          for (var j = 0; j &lt; 50; j++) {
              $scope.displayed.push(createRandomItem());
          }
      }])
      .directive('stRatio',function(){
          return {
            link:function(scope, element, attr){
              var ratio=+(attr.stRatio);
  
              element.css('width',ratio+'%');
  
            }
          };
      });
  </code></pre>
  
  <p>style.css</p>
  
  <pre><code>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 &gt; tr, tbody &gt; tr, tfoot &gt; 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;
  }
  </code></pre>
  
  <p>You will see that on safari, the table header is not fixed on page scroll; however same works fine on other browser.
  Please help.</p>