Les Allergies
Alimentaires
Posez votre question Signaler

Bordure en CSS sur un tableau [Résolu]

zebulon2503 1103Messages postés 17 avril 2008Date d'inscription 26 janvier 2012Dernière intervention - Dernière réponse le 9 janv. 2012 à 13:07
Bonjour et bonne année à tous !
Petite question concernant du CSS.
J'ai un tableau (balise th et td en HTML) que je voudrais personnaliser en CSS.
J'aimerais faire disparaître les bordures (pas trop dur pour le moment à coup de border:hidden;) mais là où ca se complique c'est que j'aimerais quand même garder les bordures verticales entre les colonnes mais également les réduire de quelques pixels en haut et bas (qu'elles soient un poil plus courtes que les colonnes).
C'est possible tout ca ?
Merci !
Zebulon
Lire la suite 

Bordure en CSS sur un tableau »

5 réponses
Réponse
+1
moins plus
Pseudo 9 janv. 2012 à 10:07
J'ai une solution à te proposer :

-Tu crée des cases verticale avec rowspan entre chaque colonne de ton tableau.
-L'intérieur de ces cases tu crée un div
-Tu applique une class .seperateur_tab au td et au div
-Tu lui donne un css du genre
div.separateur_tab{
height:75%
border-left:1px solid black;
}
td.separateur_tab{
vertical-align:middle;
text-align:center;
}
Non testé, mais je pense que tu saisie l'idée générale.

Ou bien mettre une image de barre verticale dans cette case verticale et ainsi pouvoir faire de jolies effets.

 Ajouter un commentaire
zebulon2503- 9 janv. 2012 à 13:07
Merci pour ta proposition.
J'ai testé ta solution, c'est jouable mais assez lourd.
J'ai trouvé une autre solution qui marche bien :-)

J'ai créé une image avec mes bordures centrales sous photoshop et je l'ai appliqué en background de ma table.

C'est statique c'est sûr mais mon tableau ne grossira jamais. Donc autant la jouer cool :-)

Merci à vous 2 pour vos réponses !
A+
Ajouter un commentaire
Réponse
+0
moins plus
Autumn`Tears 779Messages postés 14 mars 2009Date d'inscription 18 mai 2012Dernière intervention 5 janv. 2012 à 20:19
Salut,

Essaie avec :

table
{
border-collapse:collapse;
}
tr
{
boder:none;
}
td
{
border-left:1px solid #000000;
}

Ajouter un commentaire
zebulon2503- 9 janv. 2012 à 09:30
Salut
Merci pour ta réponse mais ce que je cherche est un peu plus complexe...
Voila ce que je voudrais avoir : 

colonne 1                  colonne2                colonne3
                    |                        |
                    |                        |
                    |                        |
fin de colonne, plus de bordures


Donc pas de bordures séparant les titres de colonnes (th) mais bordures de par exemple 20px en vertical séparant les colonnes de 26px. Donc avec 3px en haut et en bas des colonnes où la bordure est invisible...

Ou alors, mais je sais pas si c'est possible, peut on mettre une image remplacant les bordures séparant les colonnes ? Ca serait peut être plus facile ?
Ajouter un commentaire
Réponse
+0
moins plus
zebulon2503 1103Messages postés 17 avril 2008Date d'inscription 26 janvier 2012Dernière intervention 9 janv. 2012 à 09:45
Voici un lien vers un exemple de ce que je veux, pour être plus clair :-)

http://cjoint.com/?BAjjSwQTU96

J'espère que quelqu'un pourra me filer un coup de main dessus...

Merci d'avance !
Zebulon

 Ajouter un commentaire
Ajouter un commentaire
Posez votre question
Ce document intitulé « bordure en CSS sur un tableau » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?