Votre question

[résolu] (xhtml + css) affichage bordure tableau

Tags :
  • CSS
  • Programmation
Dernière réponse : dans Programmation
30 Août 2010 11:17:02

Bonjour,

Je développe un site internet dans lequel j'ai choisi d'utiliser des tableaux pour afficher des données, et je n'arrive pas à afficher correctement les bordures.

J'aimerais :
- que toutes les cellules aient une bordure ;
- que les espaces entre les cellules soient nuls ;
- que l'épaisseur totale des bordures soit de 1px, même entre 2 cellules.

Pour cela, j'ai mis en place la solution suivante :

La partie contennant les tableau a pour id "contenu".
Elle contient plusieurs sous-parties (3 pour être exact).
Une de ces sous-parties a pour id "t001" et contient tous les tableaux.
Chaque tableau appartient à la classe "t001_datas".
J'ai mis dans la feuille de style css :

#contenu table
{
border-collapse: collapse;
border-spacing: 0;
}

#t001 table, #t001 tr, #t001 td, #t001 th
{
border: solid 1px black;
}

Au final j'ai mis des bordures pratiquement partout mais rien n'y fait, sous IE, il n'y a pas de bordures, sour Firefox, il n'y a que la bordure haute et la gauche, sous google chrome et safari, presque toutes les bordures sont là, sauf la bordure droite des 2 premières lignes.
Opera affiche correctement les bordures.

Si j'enlève le border-collapse, ça marche, mais ce n'est pas ce que je veux comme résultat, et ça n'explique pas pourquoi ça ne marche pas.

J'ai uploadé un code statique (les tableaux sont générés avec javascript, j'ai récupéré la source sous google chrome, et je l'ai réarrangée pour la rendre valide).
Vous le trouverez ICI
La bordure entourant chaque tableau est celle de l'élement table, et j'ai ajouté un padding ensuite. C'est la seule bordure qui s'affiche correctement partout.

Avez-vous une idée de l'erreur que j'ai faite ?

PS : Maintenant ça marche sur IE.

Autres pages sur : resolu xhtml css affichage bordure tableau

30 Août 2010 12:14:15

Problème résolu.

Ca venait d'un overflow: auto; que j'avais mis sur tous les éléments de la page (je ne sais plus pourquoi mais c'était pendant que j'adaptais du code javascript pour ie, et j'avais une très bonne raison, enfin je m'en souviens comme tel).
m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS