Bordure en CSS sur un tableau
Résolu
zebulon2503
Messages postés
1228
Date d'inscription
Statut
Membre
Dernière intervention
-
zebulon2503 Messages postés 1228 Date d'inscription Statut Membre Dernière intervention -
zebulon2503 Messages postés 1228 Date d'inscription Statut Membre Dernière intervention -
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
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 word - Guide
- Trier un tableau excel - Guide
- Tableau ascii - Guide
- Comment imprimer un tableau excel sur une seule page - Guide
- Tableau croisé dynamique - Guide
3 réponses
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.
-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.
Salut,
Essaie avec :
table
{
border-collapse:collapse;
}
tr
{
boder:none;
}
td
{
border-left:1px solid #000000;
}
Essaie avec :
table
{
border-collapse:collapse;
}
tr
{
boder:none;
}
td
{
border-left:1px solid #000000;
}
Salut
Merci pour ta réponse mais ce que je cherche est un peu plus complexe...
Voila ce que je voudrais avoir :
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 ?
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 ?
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
https://www.cjoint.com/?BAjjSwQTU96
J'espère que quelqu'un pourra me filer un coup de main dessus...
Merci d'avance !
Zebulon
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+