0

angular jsのrouteProviderでhtmlをロードするアプリケーションがあります。html の 1 つに、ng-switch に基づく html がさらに含まれています。子htmlには、テーブル付きのパネルがあります。これらのテーブルをレスポンシブにしたいのですが、クラス table-responsive を使用してテーブルを div に埋め込んだ後でも、テーブルが div に収まるように表示されません。

<script>
 myapp.config(['$routeProvider', function($routeProvider) {
      $routeProvider.
      when('/summary',{
        templateUrl: 'templates/summary.html',
        controller: 'SummaryController'
      }).
      when('/vms', {
        templateUrl: 'templates/widgets.html',
        controller: 'WidgetController'
      }).
      otherwise({
        redirectTo: '/summary'
      });
    }]);
</script>

さらにwidgets.htmlには、次のコードがあります。

<div ng-repeat="widgetData in widgets" class="col-lg-4" >
    <div ng-switch on="widgetData.widgetType">
        <div ng-switch-when="chart">
            <div ng-include="'templates/chart.html'"></div>
        </div>
        <div ng-switch-when="number">
            <div ng-include="'templates/number.html'"></div>
        </div>
        <div ng-switch-when="table">
            <div ng-include="'templates/table.html'"></div>
        </div>
    </div>
</div>

tables.html には、次のマークアップがあります

    <div class="panel panel-primary">
    <!-- Default panel contents -->
    <div class="panel-heading">Panel heading</div>
    <div class="panel-body">
        <!--table-->
        <div class="table-responsive">
            <table class="table table-condensed table-hover table-bordered">
                <thead>
                    <tr>
                        <th>Heading 1</th>
                        <th>Heading 2</th>
                        <th>Heading 3</th>
                        <th>Heading 4</th>
                        <th>Heading 5</th>
                    </tr>
                </thead>
               <tbody>
                    <tr>
                        <td>Content 1</td>
                        <td>Content 2</td>
                        <td>Content 3</td>
                        <td>Content 4</td>
                        <td>Content 5</td>
                    </tr>
                    <tr>
                        <td>Content 1</td>
                        <td>Content 2</td>
                        <td>Content 3</td>
                        <td>Content 4</td>
                        <td>Content 5</td>
                    </tr>
                    <tr class="danger">
                        <td>Content 1</td>
                        <td>Content 2</td>
                        <td>Content 3</td>
                        <td>Content 4</td>
                        <td>Content 5</td>
                    </tr>
                </tbody>                    
            </table>
        </div>
        <!--end of table-->
    </div>
</div>
4

1 に答える 1

0

問題のクラス:

  • テーブルレスポンシブ

あなたが期待することをしません。次のルールがあります。

.テーブルレスポンシブ {
  最小高さ: .01%;
  オーバーフロー-x: 自動;
}
@media 画面と (最大幅: 767px) {
  .テーブルレスポンシブ {
    幅: 100%;
    margin-bottom: 15px;
    オーバーフロー-y: 非表示;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    ボーダー: 1px ソリッド #ddd;
  }

テーブルをコンテナに合わせて縮小することは何もしません。

于 2015-12-20T00:36:02.713 に答える