Question

我有一个应用程序，我用angular js的routeProvider加载html。在其中一个html中，我还包括基于ng-switch的htmls。在孩子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>

Answer 1

有问题的课程：

表应答

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

.table-responsive {
  min-height: .01%;
  overflow-x: auto;
}
@media screen and (max-width: 767px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
  }

无法缩小表格以适应容器。

Bootstrap响应表不在部分面板中使用角度js ng-view

1 个答案: