テーブルにネストされた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）の中のどの要素にも適用できるので、.jobs-table :not(.datepicker) trの代わりに.jobs-table trを置き換えた後、最も内側のtrがスタイルを取得します。

1つの解決策は、内側にネストされたテーブルではなく外側のテーブルにスタイルを限定したままコンビネータを使用することです。

.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テーブルに与えられているのですか、あるいは別のテーブルにまとめられていますか？