智能 table angularjs 模块已修复 table header 在 safari 上不起作用

Question

我正在使用智能 table angular 基于 js 的模块。我在我的项目中实现了这个模块，并意识到它在 safari 上无法正确呈现。然后我浏览了智能 table 站点上给出的示例，并意识到那里给出的示例在 safar 上也有问题。以下是修复了 table header 代码示例的 plunker。

http://plnkr.co/edit/fcdXKE?p=preview

HTML 标记

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

  <head>
    <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" />
    <script data-require="angular.js@1.2.25" 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 st-table="displayed" 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>

script.js

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 < 50; j++) {
            $scope.displayed.push(createRandomItem());
        }
    }])
    .directive('stRatio',function(){
        return {
          link:function(scope, element, attr){
            var ratio=+(attr.stRatio);

            element.css('width',ratio+'%');

          }
        };
    });

style.css

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

你会看到在safari上，table header 并没有固定在页面滚动上；但是在其他浏览器上同样可以正常工作。请帮忙。

Answer 1

今天早上我遇到了完全相同的问题。和你一样，我使用的是智能 table 网页中的示例代码。

问题是 css 中的 flex 属性与 Safari 不兼容。为了更好的跨浏览器兼容性：

用这个代替 display:flex（必须按此顺序）：

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

用这个代替 flex-direction:row（与 column 相同）：

-moz-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;

用这个代替 flex-wrap:nowrap :

-moz-flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;

最后用这个代替 flex-shrink:0 :

-moz-flex-shrink: 0;
-webkit-flex-shrink: 0;
flex-shrink: 0;

我可以在 Safari 8 中测试它，但它应该可以在 Safari 6+ 中运行（如果有人能证实这一点，我将不胜感激）。

关于flexbox的更多信息我推荐你A complete guide to flexbox. For cross-browser compatibility go here。

智能 table angularjs 模块已修复 table header 在 safari 上不起作用

smart table angularjs module fixed table header is not working on safari

css

angularjs

smart-table