CSS – pas de bordure aux <td> avec .class, seulement #id

Ssylvainsab 2883 Messages postés dimanche 30 juillet 2006Date d'inscriptionModérateurStatut 6 décembre 2017 Dernière intervention - 6 déc. 2017 à 15:23 - Dernière réponse : Ssylvainsab 2883 Messages postés dimanche 30 juillet 2006Date d'inscriptionModérateurStatut 6 décembre 2017 Dernière intervention
- 6 déc. 2017 à 16:25
Bonjour,

Je suis en train de créer la page d'accueil de mon site, ça se passe plutôt bien mais je rencontre un problème très surprenant.

J'affiche les catégories dans un tableau selon le format suivant :
Catégorie  [bouton + cliquable pour dérouler les articles]  Dernier article – introduction...
<table id="main" cellpadding="0" cellspacing="0">
    <tr id="cat1">
        <td class="cat_title"><h2>Catégorie</h2></td><td><btn>+</btn></td>
        <td class="articles_more">
            <h3>Dernier article paru –</h3>
            <p>Le dernier article est à propos de tel et tel sujet. Il commence par les mots suivants...</p></td></tr>
  <!-- ... et ainsi de suite, plusieurs <tr>, une ligne de tableau par catégorie -->


Je voudrais que le tr de chaque catégorie soit entouré d'une bordure (bordure en rouge pour mieux la distinguer pendant le test).
Voici mon CSS :
      
        #main{height:87%;width:80%;margin:auto;font-size:1.5em;border-collapse:separate;border-spacing:0 2px;}
        #main tr{height:18%;vertical-align:top;}
        #main td{border-style:solid;border-color:red;border-width:1px 0;padding:5px 10px}
            td.cat_title{border-left:5px solid red;}
            .cat_title h2{font-family:'Helvetica Neue','Nimbus Sans L';}
            #main btn{font-family:'Helvetica Neue','Nimbus Sans L';font-weight:bolder}
            .articles_more{border-width:1px 1px 1px 0;padding-left:200px;font-family:'DejaVu Sans';font-size:0.9em}
            .articles_more h3 {font-weight:bold;display:inline}
            .articles_more p{display:inline}

Les td.cat_title étant celles à gauche du tablea, et les td.articles_more celles à droite, cela devrait m'afficher une bordure tout autour du <tr>, non ? Et pourtant, rien, seulement une bordure en haut et une en bas...

Je n'ai une bordure sur le .cat_title qu'en y ajoutant un id et en l'appelant ainsi dans le CSS.
HTML <td class="cat_title" id="cat_blabla"><h2>Catégorie</h2></td><td><btn>+</btn></td>
CSS #cat_blabla{border-left:1px solid red;}

Cela fonctionne... mais je ne vais pas faire un id différent pour appliquer le même style à chacune de mes catégories !
Quelqu'un saurait-il d'où vient le problème ?

Merci
Afficher la suite 
2883Messages postés dimanche 30 juillet 2006Date d'inscription ModérateurStatut 6 décembre 2017 Dernière intervention

1 réponse

Répondre au sujet
Ssylvainsab 2883 Messages postés dimanche 30 juillet 2006Date d'inscriptionModérateurStatut 6 décembre 2017 Dernière intervention - 6 déc. 2017 à 16:25
0
Utile
... je me suis débrouillé comme ça, en ajoutant la class .btn pour les <td> du milieu :

        #main{height:88%;width:82.5%;margin:auto;font-size:1.5em;border-collapse:separate;border-spacing:0 2px;}
        #main tr{height:18%;vertical-align:top;}
        #main td{border-style:solid;border-color:silver;padding:5px 10px}.cat_title{border-width:2px 0 2px 2px}.btn{border-width:2px 0}td.articles_more{border-width:2px 2px 2px 0}
            .cat_title h2{font-family:'Helvetica Neue','Nimbus Sans L';}
            #main btn{font-family:'Helvetica Neue','Nimbus Sans L';font-weight:bolder}
            .articles_more{padding-left:200px;font-family:'DejaVu Sans';font-size:0.9em}
            .articles_more h3{font-weight:bold;display:inline} .articles_more p{display:inline;font-style:italic}


<table id="main" cellpadding="0" cellspacing="0">
    <tr id="cat1">
        <td class="cat_title" id="catata"><h2>Articles</h2></td><td class="btn"><btn>+</btn></td>
        <td class="articles_more">
            <h3>Dernier article paru <!--span class="article_title_date"> - mer 6 dec.</span--></h3>
            <p>| Le dernier article est à propos de tel et tel sujet. Il commence par les mots suivants...</p></td></tr>

Commenter la réponse de Ssylvainsab