테이블에 중첩 된 bs-datepicker의 스타일을 정규화하는 방법

Question

테이블의 td 요소로 각 스트랩의 bs-datepicker를 가지고 있지만 datepicker가 테이블의 스타일을 상속합니다 (그대로 유지하고 싶습니다) . 그것은 datepicker의 모양을 던지고있다.

This is a photo of the broken datepicker

나는 추가 시도 :하지 (.datepicker를) CSS의 모든 요소하지만이 작동하지 않았다.

간체 HTML :

<table class="jobs-table" > 

      <th>datepicker</th> 

      <tr> 

       <td> 
       <i class="ion-calendar date-icon"></i> 
       <input type="text" 
         name="servicedate" 
         class="form-control date-picker-class" 
         ng-model="" 
         bs-datepicker 
         /> 
       </td > 


      </tr > 
</table> 

CSS의 다음 날짜 선택기가 실제로 CSS에서보다 구체적인되는 테이블로 구현 된 경우

table { 
width: 100%; 
} 

.jobs-tables tr:first-child { 
border-bottom: 5px solid black; 
border-top: none; 
background-color: #fff; 
color: #555; 
line-height: 250%; 
text-align: left; 
} 


.jobs-table tr { 
border-top: 2px solid black; 
line-height: 250%; 
} 


.tables-table td { 
text-overflow: ellipsis; 
white-space: nowrap; 
overflow: hidden; 
max-width: 207px; 
padding-left: 10px; 
} 

.tables-table th { 
white-space: nowrap; 
overflow: hidden; 
padding-left: 10px; 
} 

Answer 1

네, 갈 수있는 방법입니다.
:not(.datepicker)은 바깥 쪽 테이블 (tbody, tr, td) 안의 모든 요소에 적용 할 수 있고 결국에는 가장 안쪽의 tr이 스타일을 가져 오기 때문에 을 .jobs-table :not(.datepicker) tr으로 바꾸면 작동하지 않습니다.

하나의 솔루션은 내부에 중첩 된 테이블이 아닌 외부 테이블로 제한된 스타일을 유지하면서 > 조합을 사용하는 것입니다.

.jobs-table { 
    width: 100%; 
} 

.jobs-tables > tbody > tr:first-child { 
    border-bottom: 5px solid black; 
    border-top: none; 
    background-color: #fff; 
    color: #555; 
    line-height: 250%; 
    text-align: left; 
} 

.jobs-table > tbody > tr { 
    border-top: 2px solid black; 
    line-height: 250%; 
} 

tables-table 클래스로 무엇을해야할지 모르겠습니다. 그 클래스가 datapicker 테이블에 주어 졌는가, 다른 테이블이 전부입니까?