[Résolu] Mise en forme tableau

Bonjour,

Comment intégreriez vous le tableau suivant:


Pour les traits verticaux bleus, il me suffit de mettre un border-right sur les TD
Par contre pour les traits blancs, si je mets un border-bottom, ça donne l'effet inverse à celui voulu:
Les traits blancs sont continus et les les bleus sont interrompus

J'ai pensé mettre quelque chose en bas de chaque TD, comme un HR par exemple mais ces derniers ne se calent pas en bas du TD mais à la fin du contenu.
Bilan, lorsque des TD ont du contenu sur plusieurs lignes, les TD n'ayant qu'une ligne voient leur HR plus haut

Bref, comment aborderiez vous ce cas ?

Merci d'avance

Hello,

Je t'aurais bien dit qu'il suffit de mettre ta border-bottom sur le tr et non le td sauf que ... http://codepen.io/anon/pen/OPyJKZ

Donc, si les bordures td et tr ont la même taille, celle du td est au dessus, ce que tu veux (sauf IE 11, HAHAHA). Si la bordure tr > td, c'est tr qui passe au dessus (même sur IE 11).

Pour le fun, j'ai fait tester sur plusieurs navigateurs, c'est IE et Opera ont l'air d'accord pour faire des bétises http://www.browserstack.com/screenshots/e48dc449ec6045162b6e86f7991a9b405b0762dc

Et les specs, juste pour rire http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution

Voilà voilà... désolée de pas avoir de super solution, mais c'est encore une fois un souci de rendu navigateur
Modifié par Stéphanie W. (29 Nov 2014 - 16:11)

Merci d'avoir pris le temps de répondre

Je pense sans pb pouvoir avoir une bordure td (verticale) un poil plus grande que celle du tr

Je vais tenter ça
td => xxx px
tr => xxx-1 px

Merci pour cette piste

Bon alors, après plusieurs tests, en effet, la solution proposée s'avère trop aléatoire dans le comportement des navigateurs

Mais j'ai fini par trouver, la solution est toute bête, sous mes yeux depuis le début !!!

Je disais que j'avais tenté de mettre soit un div dans ton td soit un hr à la fin avec un border-bottom et que ça marchait pas car ça se calait non pas au bottom du td mais au bottom du contenu qui par définition est variable

Mais il y a une chose dont l'emplacement est invariable, non pas la fin du contenu mais son début, calé en haut du td

La solution est donc de mettre un div dans le td pour encapsuler le contenu et de mettre un border-top sur ce div et là, on fait tout ce qu'on veut, pas besoin de jongler avec la taille du border horizontal vs taille border vertical

Il suffit ensuite de mettre quelques règles de finition pour retirer le border de la première ligne, de transférer le padding du td vers le div et c'est fini !!!

En tous cas merci pour ton aide qui, même si elle n'a pas répondu à cette problématique, m'a fait découvrir le phénomène des borders qui passent l'un sous l'autre en fonction de la taille de chacun. Je n'étais jamais tombé dessus

Bon dimanche !!!