affichage de datepicker

Bonjour,

En fait, je viens de créer un datepicker jquery que j'ai un peu personnalisé avec des couleurs différentes dans plusieurs cases de jours comme vous pourrez le voir dans le code ci-dessous.

J'ai crée une taille pour le tableau, pour les lignes et pour les cellules. Les cellules(<td>) contiennent deux <div>(une pour la partie du dessus et une pour la partie du dessous). Le problème est visuel. En fait, je remarque que mes cellules(<td>) se colorisent bien de l'intérieur mais non sur leurs bords, leurs contours. De plus, la dernière bordure du tableau est un peu de travers. Je n'arrive pas à comprendre pourquoi.

Avez-vous une solution ?

merci
Voici mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
$("#date").datepicker(frenchOpts);
var date = new Date();
initDatePicker(date.getMonth()+1,date.getFullYear());
var height = 2.2;
var width = 2.2;
var unit = "em";
//rearrangement de la table
$("table").css("width", "" + (width*7) + unit);
$("table").css("height", "" + (height*5) + unit);
$("table").css("margin-left","0.8"+unit);
$("#date table tbody td a[class*=\"ui-state-active\"]").each(function(){
    $(this).removeClass('ui-state-active');
    $(this).removeClass('ui-state-highlight');
    $(this).removeClass('ui-state-hover');
});
$("table thead tr th").each(function() {
    $(this).css("width", "" + width + unit);
});
$("table td").each(function () {
    $(this).parent().css("width","" + (7*width) + unit);
    $(this).parent().css("height","" + height + unit);
    $(this).attr("onclick","");
    //$(this).css("position", "relative");
    $(this).css("width", "" + width + unit);
    $(this).css("height", "" + height + unit);
    $(this).css("border", "0.1" + unit+" solid black");
    $(this).append("<div style=\"background-color:white;vertical-align:bottom;height:"+(height/2)+unit+";width:+"+width+unit+";padding:0em 0em 0em 0em;\"></div>");
});
$("table td a").each(function () {
    $(this).css("font-size", "1.3"+unit);
    $(this).css("color", "black");
    $(this).css("text-align","center");
    $(this).removeClass("ui-state-default");
    $(this).removeClass("ui-state-hover");
    $(this).wrap("<div style=\"background-color:white;height:"+(height/2)+unit+";width:"+width+"em;vertical-align:top;padding:0em 0em 0em 0em;\"></div>");
});
var selector = 'button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a';
$(selector).live('mouseover', function(){
    $(this).removeClass('ui-state-hover');
    if (this.className.indexOf('ui-datepicker-prev') != -1){
        $(this).removeClass('ui-datepicker-prev-hover');
    }
    if (this.className.indexOf('ui-datepicker-next') != -1){
        $(this).removeClass('ui-datepicker-next-hover');
    }
});