最大化CSS中的列大小

时间：2017-05-23 21:12:54

标签： javascript jquery html css angularjs

我试图通过将大小设置为标记来设置表格的最大宽度 - 表格水平拉伸并创建底部滚动条。 当我打开页面或更改控制台内部时，没有任何反应。 我正在使用Angular从静态源获取数据，我想完美地显示日志。

HTML：

%4

Errors.js：

<div class="table_content" ng-app="errorsApp" ng-controller="mainController">
      <form>
        <div class="form-group">
          <div class="input-group">
            <div class="input-group-addon"><i class="fa fa-search"></i></div>
            <input type="text" class="form-control" ng-model="searchCritical">
          </div>      
        </div>
      </form>

      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <td>
              <a href="#" ng-click="sortType = 'id'; sortReverse = !sortReverse">
                ID 
                <span ng-show="sortType == 'id' && !sortReverse" class="fa fa-caret-down"></span>
                <span ng-show="sortType == 'id' && sortReverse" class="fa fa-caret-up"></span>
              </a>
            </td>
            <td>
              <a href="#" ng-click="sortType = 'errorname'; sortReverse = !sortReverse">
                Error Name
                <span ng-show="sortType == 'errorname' && !sortReverse" class="fa fa-caret-down"></span>
                <span ng-show="sortType == 'errorname' && sortReverse" class="fa fa-caret-up"></span>
              </a>
            </td>
            <td>
              <a href="#" ng-click="sortType = 'date'; sortReverse = !sortReverse">
                Date 
                <span ng-show="sortType == 'date' && !sortReverse" class="fa fa-caret-down"></span>
                <span ng-show="sortType == 'date' && sortReverse" class="fa fa-caret-up"></span>
              </a>
            </td>
            <td>
              <a href="#" ng-click="sortType = 'true'; sortReverse = !sortReverse">
                Handled 
                <span ng-show="sortType == 'true' && !sortReverse" class="fa fa-caret-down"></span>
                <span ng-show="sortType == 'true' && sortReverse" class="fa fa-caret-up"></span>
              </a>
            </td>
          </tr>
        </thead>

        <tbody>
          <tr ng-repeat="error in errors | orderBy:sortType:sortReverse | filter:searchError">
            <td>{{ error.id }}</td>
            <td>{{ error.errorname }}</td>
            <td>{{ error.date }}</td>
            <td><input type="checkbox" ng-checked="item.isRowSelected" ng-click="toggleSelection(item)" /></td>
          </tr>
        </tbody>
      </table>
      <button id="button2id" name="button2id" class="btn btn-danger">Scary Button</button>
    </div>

CSS：

angular.module('errorsApp', [])

.controller('mainController', function($scope) {
  $scope.sortType     = 'name'; // set the default sort type
  $scope.sortReverse  = false;  // set the default sort order
  $scope.searchFish   = '';     // set the default search/filter term

  $scope.errors = [
    { id: '1', errorname: 'Error Save Product in Products => Product URL = http://www.babab.com/itm/Apple-MacBook-Air-13-3-LED-Intel-Core-i5-8GB-RAM-128GB-Storage-MMGF2LL-A-/401311671086?_trkparms=5373%3A0%7C5374%3AFeatured', date: 'Sat Apr 22 2017 00:04:04 GMT+0300'},
    { id: '2', errorname: 'Error Save Product in Products => Product URL = http://www.babab.com/itm/Apple-MacBook-Air-13-3-LED-Intel-Core-i5-8GB-RAM-128GB-Storage-MMGF2LL-A-/401311671086?_trkparms=5373%3A0%7C5374%3AFeatured', date: 'Sat Apr 22 2017 00:06:59 GMT+0300'},
    { id: '3', errorname: 'Error Save Product in Products => Product URL = http://www.babab.com/itm/Apple-MacBook-Air-13-3-LED-Intel-Core-i5-8GB-RAM-128GB-Storage-MMGF2LL-A-/401311671086?_trkparms=5373%3A0%7C5374%3AFeatured', date: 'Sat Apr 22 2017 00:08:25 GMT+0300'},
    { id: '4', errorname: 'Error Save Product in Products => Product URL = http://www.babab.com/itm/Apple-MacBook-Air-13-3-LED-Intel-Core-i5-8GB-RAM-128GB-Storage-MMGF2LL-A-/401311671086?_trkparms=5373%3A0%7C5374%3AFeatured', date: 'Sat Apr 22 2017 00:10:39 GMT+0300'},
    { id: '5', errorname: 'Error Save Product in Products => Product URL = http://www.babab.com/itm/Apple-MacBook-Air-13-3-LED-Intel-Core-i5-8GB-RAM-128GB-Storage-MMGF2LL-A-/401311671086?_trkparms=5373%3A0%7C5374%3AFeatured', date: 'Sat Apr 22 2017 00:11:54 GMT+0300'},
    { id: '6', errorname: 'Error Add babab => undefined', date: 'Sat Apr 22 2017 17:54:14 GMT+0300'},
    { id: '7', errorname: 'Error Add babab => undefined', date: 'Sat Apr 22 2017 17:56:14 GMT+0300'},
    { id: '8', errorname: 'Error Add babab => undefined', date: 'Sat Apr 22 2017 17:56:43 GMT+0300'},
    { id: '9', errorname: 'Error Add babab => URL: https://www.babab.com/Logitech-Multimedia-Speakers-Multiple-Devices/dp/B00EZ9XKCM/ref=sr_1_6?s=pc&ie=UTF8&qid=1492871948&sr=1-6&keywords=speakers+for+desktop+computer babab Error: This item is not accessible through the Product Advertising API.', date: 'Sat Apr 22 2017 17:57:21 GMT+0300'},
    { id: '10', errorname: 'Error Add babab => URL: https://www.babab.com/Logitech-Multimedia-Speakers-Multiple-Devices/dp/B00EZ9XKCM/ref=sr_1_6?s=pc&ie=UTF8&qid=1492871948&sr=1-6&keywords=speakers+for+desktop+computer babab Error: This item is not accessible through the Product Advertising API.', date: 'Sat Apr 22 2017 17:57:36 GMT+0300'},
    { id: '11', errorname: 'Error Save Product in Products => Product URL = https://www.babab.com/item/12pcs-lot-Bluetooth-u8-smartwatch-Wristwatch-U-Smart-Watches-Fitness-Tracker-for-iPhone-Samsung-HTC-Android/32644562763.html?spm=2114.01010208.3.11.mfE1iv&ws_ab_test=searchweb0_0,searchweb201602_6_10065_10068_433_434_10136_10137_10138_10060_10062_10141_10056_10140_10055_10054_10059_123_10099_10103_10102_10096_10052_10053_10050_10107_10142_10051_10106_9983_10526_10529_10084_10083_10080_10082_10081_10110_10111_10112_10113_10114_10517_10078_10079_10073_10070_10122_10123_10124-9983_10517,searchweb201603_3,afswitch_1,ppcSwitch_4,single_sort_0_default&btsid=40a39338-3961-4ed0-b90b-01cb72e2f667&algo_expid=a2e2a37a-61be-4310-9b6f-b40940a6cb80-1&algo_pvid=a2e2a37a-61be-4310-9b6f-b40940a6cb80', date: 'Sat Apr 22 2017 17:59:21 GMT+0300'},
    { id: '12', errorname: 'Error Add babab => URL: https://www.babab.com/Logitech-Multimedia-Speakers-Multiple-Devices/dp/B00EZ9XKCM/ref=sr_1_6?s=pc&ie=UTF8&qid=1492871948&sr=1-6&keywords=speakers+for+desktop+computer babab Error: This item is not accessible through the Product Advertising API.', date: 'Sat Apr 22 2017 17:59:36 GMT+0300'},
    { id: '13', errorname: 'Error Add babab => URL: https://www.babab.com/Logitech-Multimedia-Speakers-Multiple-Devices/dp/B00EZ9XKCM/ref=sr_1_6?s=pc&ie=UTF8&qid=1492871948&sr=1-6&keywords=speakers+for+desktop+computer babab Error: This item is not accessible through the Product Advertising API.', date: 'Sat Apr 22 2017 18:02:06 GMT+0300'}
  ];

$scope.toggleSelection = function(item){
item.isRowSelected = !item.isRowSelected;
}
$scope.isAnythingSelected = function () {
    for(var i = 0; i < $scope.data.length; i++){
        if($scope.data[i].isRowSelected === true){
            return true;
        }
    }
    return false;
};
});

enter image description here enter image description here

1 个答案:

答案 0 :(得分：1)

我已修复它，这是一个文本问题导致表格的宽度水平增加。

相关问题
最新问题