title: Border-Spacing and Border-Collapse not working
body: <p>Is it possible someone could tell me why border-collapse and border-spacing are not working on my  elements please?</p>
  
  <p><a href="http://jsfiddle.net/7Q4Bt/177/" rel="nofollow">http://jsfiddle.net/7Q4Bt/177/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form action=""&gt;
    &lt;input type="text" class="datepicker-element checkin-date__input" /&gt;
      &lt;p class="date-output"&gt;&lt;/p&gt;
  &lt;/form&gt;
  
  &lt;form action=""&gt;
    &lt;input type="text" class="datepicker-element checkout-date__output" /&gt;
      &lt;p class="date-output"&gt;&lt;/p&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>I am currently using the JQuery UI Datepicker</p>
  
  <p>Kind Regards,</p>
  
  <p>B</p>