1

私の要素で Border-Collapse と Border-Spacing が機能しない理由を誰かが教えてくれる可能性はありますか?

http://jsfiddle.net/7Q4Bt/177/

HTML

<form action="">
  <input type="text" class="datepicker-element checkin-date__input" />
    <p class="date-output"></p>
</form>

<form action="">
  <input type="text" class="datepicker-element checkout-date__output" />
    <p class="date-output"></p>
</form>

CSS

body {
    font: 12px sans-serif;
}
.ui-widget-header {
    border: 0;
    background: 0;
}
.datepicker-element {
    border: 2px solid #000;
    border-radius: 5px;
    padding: 10px 15px;
}
.datepicker-element:focus {
    border: 2px solid #ffd300;
    outline: none;
}
.ui-datepicker {
    border: 2px solid #d6d6d6;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 1px solid #e9e6e9;
    background: #FFF;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
.ui-datepicker-calendar {
    border-collapse: collapse;
    border-spacing: 0;
}
.ui-datepicker td {
    border-collapse: collapse;
    border-spacing: 0;
    padding: 0;
}
.date-picker-child--highlight .ui-state-default {
    background: #ffd300;
    color: #FFF;
}

現在、JQuery UI Datepicker を使用しています

敬具、

B

4

2 に答える 2

2

あなたが抱えている問題は、Datepicker コントロールの境界線が、テーブル セル自体ではなく、テーブル セル内の<span>または要素にあることです。<a>

境界線が表のセルにある場合border-collape、などは、まさにあなたがやろうとしていることを行います。しかし、それは内側の要素にあるため、セルの境界線を折りたたんでも、表示される境界線に違いはありません。

次のように、内側の要素の境界線をクリアする必要があります。

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {border:none;}

そして、それを表のセルに設定します。 

.ui-datepicker td {border:1px solid #e9e6e9;   }

Datepicker のドキュメントには、考えられるすべてのケースをカバーするためのより「公式な」方法があるかもしれませんが、それはフィドルで機能するようです。

それが役立つことを願っています。

于 2013-08-08T06:55:41.577 に答える
0

padding:0を削除してみてください.ui-datepicker td。あなたの新しいスタイルが

.ui-datepicker td {
    border-collapse: collapse;
    border-spacing: 0;
}

これがあなたが探しているものであることを願っています。ありがとうございました ：-）

于 2013-08-08T06:47:16.107 に答える