javascript - 最大化CSS中列的大小

标签 javascript jquery html css angularjs

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

HTML:

<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>

Errors.js:

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;
};
});

CSS:

html,body {
    width: 100%;
    height: 100%;
}

.btn-primary{
    margin-right: 10px;
}

.container{
  margin: 10px 0;
}

.navbar-inner {
    /*height: 90px*/
    min-height: 60px
 }

.navbar .brand {
    padding: 0 10px;
}

.navbar .nav > li > a {
    padding: 20px 15px;
    /*padding: 35px 15px;*/
}

.navbar .btn-navbar {
    /*margin-right: 0px;*/
    margin-top:15px;
}

.brand img{
    margin-top: 5px
}

@media (max-width:768px) {
    .brand img {
        margin-bottom: 5px
    }
    .navbar .btn-navbar{
        /*margin-right: -15px;*/
    }
    .navbar .nav > li > a {
        padding: 10px 15px;
    }
}

/* Header */
.header {
    display: table;
    position: relative;
    width: 100%;
    height: auto;
    background: url(../img/coffee.jpg) no-repeat center center scroll;
    color: #ffffff;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.navbar-header img {
    max-width: 100%;
    height: auto;
    margin: 0 30px 0 0;
}

/* Services */
.services {
    padding: 50px 0;
    max-width: 100%;
    height: auto;
    background-color: #EEEEEE;
    margin-top: 100px;
    text-align: center;
}

.ckbox {
    position: relative;
}

.ckbox input[type="checkbox"] {
    opacity: 0;
}

.table_content {
    width: 100%;
    margin-top: 86px;
}

.table_content td {
    width: 10%;
}

enter image description here enter image description here

最佳答案

我已经修复了，是文本问题导致表格的宽度水平增加。

关于javascript - 最大化CSS中列的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44145135/

上一篇：jquery - 防止 bootstrap 崩溃动画高于 md 断点

下一篇：html - 当浏览器窗口调整大小时，在图像顶部保持 'pins' 的位置

相关文章：

javascript - css/jquery - 将所有元素边距值提取到一个变量中

jquery - IE 9 中的宽度问题，但它在 chrome、IE 7 和 8 中工作正常

javascript - 如何从 div 复制所有内容 (<p><strong>) 并粘贴到模式中

html - 为什么要使用显示:table instead of table

javascript - 将 flot 饼图另存为 PDF

javascript - 跨域JavaScript，嵌入iframe情况下的父位置设置

javascript - TinyMCE 5.x - 突出显示自定义下拉菜单中的元素

javascript - Jquery 事件不起作用

javascript - 将 node.js 服务器端代码移植到 HTML5 WebSockets

html - 字段有效时 Angular Material 形式缩小

©2024 IT工具网  联系我们