1

私はスマート テーブル角度 js ベースのモジュールを使用しています。このモジュールをプロジェクトに実装したところ、サファリで正しくレンダリングされないことに気付きました。次に、スマートテーブルサイトで提供されている例を調べたところ、そこで提供されているサンプルの例にも safar で問題があることがわかりました。以下は、固定テーブル ヘッダー コード サンプルを持つ 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+'%');

          }
        };
    });

スタイル.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 では、ページ スクロール時にテーブル ヘッダーが固定されていないことがわかります。ただし、他のブラウザでも同じように動作します。助けてください。

4

1 に答える 1

4

私は今朝まったく同じ問題を抱えていました。あなたのように、私はスマートテーブルのウェブページのサンプルコードを使用していました.

問題は、css のフレックス プロパティが 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をお勧めします。ブラウザ間の互換性については、こちらを参照してください。

于 2015-04-27T13:54:56.657 に答える