Border-Spacing and Border-Collapse not working

Border-Spacing and Border-Collapse not working

Is it possible someone could tell me why border-collapse and
border-spacing are not working on my elements please?
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;
}
I am currently using the JQuery UI Datepicker
Kind Regards,
B