각도 UI 모달에 패딩 추가

Question

이 plunk에는 테이블이 포함 된 각도 UI 모달이 있습니다. 테이블 테두리와 모달 경계 사이에 여백을 추가하고 싶지만, CSS에서 padding 요소를 선언해도 작동하지 않습니다. 이것을 달성하는 방법?

또한 콘텐츠 폭에 따라 자동으로 확장하려면 모달 너비가 필요합니다. 이것이 가능한가?

HTML

<style> 
     .app-modal .modal-dialog { 
      min-width: 260px; 
      padding: 10px; 
     } 
    </style> 

    <script type="text/ng-template" id="myModalContent.html"> 

    <div class="modal-header"> 
     <h4 class="modal-title">The Title</h4> 
    </div> 

    <table border="1" style="width:100%"> 
     <tr> 
     <td>aaa</td> 
     <td>111</td> 
     </tr> 
     <tr> 
     <td>bbb</td> 
     <td>222</td> 
     </tr> 
     <tr> 
     <td>ccc</td> 
     <td>333</td> 
     </tr> 
    </table> 

</script> 

자바 스크립트 :

var app = angular.module('app', ['ui.bootstrap']); 
app.controller('ctl', function ($scope,$uibModal) { 

      $scope.modalInstance = $uibModal.open({ 
       templateUrl: 'myModalContent.html', 
       windowClass: 'app-modal', 
      }); 


}); 

Answer 1

클래스 .modal 컨텐츠 대신

.app-modal .modal-content{ 
    padding: 10px; 
} 

에 패딩을 추가