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

Fermé
Ssylvainsab Messages postés 2884 Date d'inscription samedi 29 juillet 2006 Statut Modérateur Dernière intervention 15 août 2020 - 6 déc. 2017 à 15:23
Ssylvainsab Messages postés 2884 Date d'inscription samedi 29 juillet 2006 Statut Modérateur Dernière intervention 15 août 2020 - 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

1 réponse

Ssylvainsab Messages postés 2884 Date d'inscription samedi 29 juillet 2006 Statut Modérateur Dernière intervention 15 août 2020 825
6 déc. 2017 à 16:25
... 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>

0