日時ピッカーは、私はそれは素晴らしい作品eonasdan（<a href="https://github.com/Eonasdan/bootstrap-datetimepicker" rel="nofollow">https://github.com/Eonasdan/bootstrap-datetimepicker</a>）</p> <p>から日付ピッカーを使用しています、私のテーブル

Question

からスタイルを継承しますが、私は、テーブル内に置くとき、それはテーブルのスタイルを継承します。あたかも日記がテーブルになっているかのようです。

どうすればこの問題を回避できますか？私は私のCSSに以下のいる

：

table.table { 
    tr { 
     th { 
      color: #ff0000; //red 
     } 
    } 
    } 

これは私のhtmlファイルです：

<table class="table"> 
    <tr> 
     <th>Reconcile Date</th> 
    </tr> 
    <tr> 
     <td> 
     <div class="pickdate"> 
      <input type="text" placeholder="Reconcile Date" class="form-control "> 
     </div> 
     </td> 
    </tr> 
</table> 

これが赤に私のテーブルのヘッダー内のテキストを設定します。または、私のdatepickerの曜日と曜日を赤に設定します。 pickdateクラスを使用すると、DateTimePickerのスタイルをカスタマイズするために、あなたのスタイルシートに次のルールを追加することができます日付ピッカー

Answer 1

。ここではCSSとjsfiddleのリンクは次のとおりです。

.table tr th{ color: red; } 

.table-condensed thead tr th{ color: black;} 

https://jsfiddle.net/w8gmcgv4/5/

はあなたのためであれば、これらの作業を私に知らせてください。ありがとう！

Answer 2

をロード注意：ピッカーはあなたが検査コンポーネントのHTMLは、スタイルのカスタマイズをsimplyfyすることができますdebugオプションを持っていることを

.bootstrap-datetimepicker-widget { 
    table { 
    tr { 
     th { 
     color: black; 
     } 
    } 
    } 
} 

注意。

の作業例：私はあなたのDatePickerのテーブルの上のクラスのものを見つけると、そのレベルでCSSを追加することができたGoogle Chromeの検査ツールを使用することにより

jQuery('#dates-ifbZ6A4b6r568bad40cd473').datetimepicker({ 
 
    format: "DD/MM/YYYY", debug: true 
 
});

table.table tr th { 
 
    color: #ff0000; 
 
} 
 

 
.bootstrap-datetimepicker-widget table tr th { 
 
    color: #000000; 
 
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<table class="table"> 
 
    <tr> 
 
    <th>Debt Ref</th> 
 
    <th>Reconcile Date</th> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <div>NOR087-DAN052</div> 
 
    </td> 
 
    <td> 
 
     <div class="col-sm-12"> 
 
     <input type="text" placeholder="Reconcile Date" name="dates[ifbZ6A4b6r568bad40cd473]" id="dates-ifbZ6A4b6r568bad40cd473" class="form-control "> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table> 
 
<p> 
 
The text in the datepicker shouldn't be red 
 
</p>