Bordure en CSS sur un tableau

Résolu/Fermé

zebulon2503 Messages postés 1228 Date d'inscription jeudi 17 avril 2008 Statut Membre Dernière intervention 11 février 2016 - 5 janv. 2012 à 09:48
zebulon2503 Messages postés 1228 Date d'inscription jeudi 17 avril 2008 Statut Membre Dernière intervention 11 février 2016 - 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

A voir également:

Bordure en CSS sur un tableau
Tableau croisé dynamique - Guide
Tableau ascii - Guide
Comment faire un tableau - Guide
Comment imprimer un tableau excel sur une seule page - Guide
Trier un tableau excel - Guide

3 réponses

Réponse 1 / 3

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.

zebulon2503 Messages postés 1228 Date d'inscription jeudi 17 avril 2008 Statut Membre Dernière intervention 11 février 2016 110
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+

Réponse 2 / 3

Autumn`Tears Messages postés 1054 Date d'inscription samedi 14 mars 2009 Statut Membre Dernière intervention 23 octobre 2013 145
5 janv. 2012 à 20:19

Salut,

Essaie avec :

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

zebulon2503 Messages postés 1228 Date d'inscription jeudi 17 avril 2008 Statut Membre Dernière intervention 11 février 2016 110
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 ?

Réponse 3 / 3

zebulon2503 Messages postés 1228 Date d'inscription jeudi 17 avril 2008 Statut Membre Dernière intervention 11 février 2016 110
9 janv. 2012 à 09:45

Voici un lien vers un exemple de ce que je veux, pour être plus clair :-)

https://www.cjoint.com/?BAjjSwQTU96

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

Merci d'avance !
Zebulon

Discussions similaires

Bibliothèque

Impossible d'afficher le rapport de tableau croisé dynamique sur un rapport

Trouver le nom d'un tableau avec sa photo.

Formule taux de marque