0

我有一个应用程序，我在其中通过 Angular js 的 routeProvider 加载 html。在其中一个 html 中，我还包括基于 ng-switch 的 html。在子 html 中，我有带表格的面板。我想让这些表响应，但不知何故，即使在将表嵌入到具有类表响应的 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

有问题的班级：

  • 表响应

不符合您的预期。它有以下规则：

.table 响应式 {
  最小高度：0.01%；
  溢出-x：自动；
}
@media 屏幕和（最大宽度：767px）{
  .table 响应式 {
    宽度：100%；
    底部边距：15px；
    溢出-y：隐藏；
    -ms-溢出样式：-ms-autohiding-scrollbar；
    边框：1px 实心#ddd；
  }

这对缩小表格以适应容器没有任何作用。

于 2015-12-20T00:36:02.713 回答