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

Messages postés
2899
Date d'inscription
dimanche 30 juillet 2006
Statut
Modérateur
Dernière intervention
10 novembre 2019
- - Dernière réponse : Ssylvainsab
Messages postés
2899
Date d'inscription
dimanche 30 juillet 2006
Statut
Modérateur
Dernière intervention
10 novembre 2019
- 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 

1 réponse

Messages postés
2899
Date d'inscription
dimanche 30 juillet 2006
Statut
Modérateur
Dernière intervention
10 novembre 2019
655
0
Merci
... 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>