css - jQuery datepicker の外観に影響を与えるブループリント CSS

Question

ブループリントCSSフレームワークと一緒にjquery uiのdatepickerを使用するときに表示されるスタイリングの問題を修正する方法を誰かが教えてくれますか? 具体的には、日付を含むテーブルは、それが置かれているコンテナーよりも大きく (幅が広く) 表示されます。

Answer 1

私は他の答えを試しましたが、彼らは私のためにそれをしませんでした。数時間問題をいじった後、私は自分に合った解決策を思いつきました (Blueprint 1.0、Jquery UI 1.8.5、Chrome と IE で Smoothness、Redmond、Dark Hive テーマでテスト):

/* remove blue backgrounds - separate for TH to work in IE */
.ui-datepicker-calendar tbody tr:nth-child(even) td,  
.ui-datepicker-calendar tbody tr.even td {
  background-color:inherit;
 }
.ui-datepicker-calendar thead th {
  background-color:inherit;
 }
/* set correct line height */
.ui-datepicker-calendar tbody tr td {  
  line-height: 1.1;
}
/* (optional)  make same size as example */
.ui-datepicker { font-size: 0.9em; }

Answer 2

この問題を解決するために、次のCSSを追加しました。

.ui-datepicker-calendar table{
  margin: 0; }
.ui-datepicker-calendar th , .ui-datepicker-calendar td {
  padding: 0; text-align: center; }

Answer 3

oneBelizean は正しい軌道に乗っていましたが、テーブルで th および td セレクターを修飾するまで機能しませんでした。

.ui-datepicker-calendar table{
  margin: 0; }
.ui-datepicker-calendar table th , .ui-datepicker-calendar table td {
  padding: 0; text-align: center; }

これを行った後、サイモンが追加した余分なものは必要ありませんでした。

Answer 4

要素に非常に具体的にアクセスし、パディングを削除する必要があることがわかりました。

/* JQUERY-UI + BLUEPRINT CSS CALENDAR FIX */
.ui-datepicker table{
  margin: 0; }
.ui-datepicker-calendar thead tr th , .ui-datepicker tbody tr td {
  background:white; color:#333;  }
.ui-datepicker-calendar thead tr th{
  padding: 5px 0; }
.ui-datepicker-calendar tbody td{
  padding:0 2px 2px 0; }
.ui-datepicker-calendar tbody td a{
  padding:0 1px 0 0; }
.ui-datepicker-calendar {
  font-size:0.8em; }