• [^] # I want more. Yes we can !

    Posté par . En réponse à l’entrée du suivi Amélioration de la mise en forme du tableau de bord. Évalué à 3 (+0/-0).

    Merci NoNo !

    J'ai quelques modifications complémentaires à te demander. Pourrais-tu également raccourcir le libellé de la dernière colonne, intitulée « Dernière réponse », en « Dernière rép. », afin d'éviter le renvoi à la ligne et l'étrange élargissement (sur Firefox 4.0b7) qu'il provoque sur la dernière colonne (celle-ci garde la largeur de la cellule d'entête comme si le renvoi n'avait pas eu lieu) ? J'ai expérimenté avec firebug et ça fait l'affaire, enfin quand le navigateur n'est pas trop large...

    En effet, quand le tableau a de la place pour s'étaler (au delà de la taille minimum nécessaire pour qu'il n'ait aucun contenu de cellule à mettre sur plusieurs lignes), le bord du tableau continu à s'élargir, mais le contenu ne suit plus. J'ai trouvé la raison de ce phénomène, il est dû au fait que le tableau s'affiche, non comme un tableau, mais comme un bloc, à cause d'une des propriétés CSS dans le bloc de définitions suivant (CSS par défaut) :

    article, ul.threads > li.comment, .markdown_cheatsheet, #contents > form, form#new_post, body#users-comments #contents > ul > li, body#comments-create #contents > ul > li#comment_new, body#comments-show #contents > ul > li.comment, body#wiki_pages-revision #contents, body#dashboard-index #contents table, body#trackers-index #contents table, body#redaction-index #container > div, body#boards-show #contents, body#stylesheets-edit #contents, body#wiki_pages-changes #contents, body#admin-index #container > ul, #redaction #chat {
 background: none repeat scroll 0 0 white;
 border: 1px solid #A99C90;
 border-radius: 6px 6px 6px 6px;
 display: block;
 font-size: small;
 margin-bottom: 15px;
 padding: 10px 34px;
}

    C'est le « display: block » qui est le responsable. Le problème, c'est que si tu laisses le tableau en « display: table » et que tu as « border-collapse: collapse », tu perds tes coins ronds. La solution magique à ça, c'est de définir « display: inline-block » pour ces tableaux, ce qui suppose de les isoler des propriétés communes :

    article, ul.threads > li.comment, .markdown_cheatsheet, #contents > form, form#new_post, body#users-comments #contents > ul > li, body#comments-create #contents > ul > li#comment_new, body#comments-show #contents > ul > li.comment, body#wiki_pages-revision #contents, body#dashboard-index #contents table, body#trackers-index #contents table, body#redaction-index #container > div, body#boards-show #contents, body#stylesheets-edit #contents, body#wiki_pages-changes #contents, body#admin-index #container > ul, #redaction #chat {
 background: none repeat scroll 0 0 white;
 border: 1px solid #A99C90;
 border-radius: 6px;
 /*display: block; /* inutile si tous les autres élts sont de type bloc */
 font-size: small;
 margin-bottom: 15px;
 padding: 10px 34px;
}
body#dashboard-index #contents table, body#trackers-index #contents table {
 display: inline-block; /* pour les coins arrondis avec collapse */
}