1. ホーム
  2. 質問と答え
  3. CSSの列の最大サイズ

CSSの列の最大サイズ

2017-05-23 11 views
0

サイズをタグに設定してテーブルの最大幅を設定しようとしています - テーブルが水平に縞模様になっていて、下部のスクロールバーを作成しています。 ページを開いたり、コンソール内で変更すると何も起こりません。 私は、Angularを使用して静的ソースからデータを取得しています。ログを完全かつうまく表示したいと思います。CSSの列の最大サイズ

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 hereenter image description here

出典

2017-05-23 drorAlfasi

+0

問題と説明のスクリーンショットを表示できます。あなたはCSSで何かしたいですか？ – Nimmi

答えて

1

私はそれを修正した、それは、TEでしたテーブルの幅を水平に増加させるxtの問題。

出典

2017-05-24 16:24:49 drorAlfasi

+0

長いテキストが必要な場合は、 'table {width：100％;テーブルレイアウト：固定; } td {word-wrap：break-word;オーバーフローラップ：ブレークワード。 } 'それは仕事を壊し、幅を使わずに高さを増やすだけの長いテキストを許可します。 –

+0

ありがとうございます、これは問題で、今修正されました。 – drorAlfasi

関連する問題

 関連する問題