[Résolu] Suppression de bordure tableau

Bonjour,

J'ai un problème avec une bordure d'un endroit de mon tableau que je n'arrive pas à supprimer.


Auriez-vous une solution ?

Je vous remercie d'avance !

<section>
                <br />
                    <table class="tab_consultation" >
                            <thead> 
                                <tr>
                                    <th>Test</th>
                                    <th >Test</th>
                                </tr>
                            </thead>
                        <tr>
                           <td class="bordure_droite">Test</td>
                            <td>Test:</td>
                        </tr>
                        <tr>
                           <td class="bordure_droite">Test:</td>
                            <td>Test</td>
                        </tr>
                        <tr>
                           <td class="bordure_droite">Test</td>
                            <td>Test</td>
                        </tr>
                        <tr>
                           <td class="bordure_droite">Test</td>
                            <td>Test</td>
                        </tr>
                        <tr>
                           <td class="bordure_droite">Test</td>
                           <td></td>
                        </tr>
                    </table>
                <br />
                <table class="Test" >      
                    <thead> 
                        <tr>
                            <th>Test</th>
                        </tr>
                    </thead>
                    <tr>
                       <td>Test</td>
                       <td>Test</td>
                    </tr>
                    <tr>
                        <td>Test</td>
                       <td>Test</td>
                    </tr>
                </table>
            
                <br />
                <table class="tab_consultation" >     
                    <thead>
                        <tr>
                            <th>Test</th>
                        </tr>
                    </thead>
                    <tr>
                       <td>Test</td>
                       <td>Test</td>                   
                    </tr>
                    <tr>
                    <td>Test</td>
                    <td>Test</td>
                    </tr>
                </table>
            
                <br />
                <table class="tab_consultation" >     
                    <thead>
                        <tr>
                            <th>Test</th>
                        </tr>
                    </thead>
                    <tr>
                       <td>Test</td>
                       <td>Test</td>
                    </tr>
                </table>         
                <br />
            </section>

/******************** Style tableau ********************/
/*********************************************************/

.tab_consultation {
        border-spacing:0px;
        border: 3px solid #0066A0;
        background-color: #ECECEC;
        font-family:'Raleway-Regular';
        border-radius: 10px;
        box-shadow: 6px 6px 6px #939393;
        border-right: 6px solid #0066A0;
}

.tab_consultation thead {
        width: 10px;
        height: 50px;
        background-color: #DBDBDB; 
        font-size:21px;
        color: #004975;
        border-right: 10px solid #0066A0;
        
}

.tab_consultation th {
        border-right: 3px solid #0066A0;
        border-bottom: 3px solid #0066A0;
        text-align: left;
        padding-left: 20px;
        
    
}

.tab_consultation td {
        width: 477px;
        height: 57px;
        padding-left: 20px;
}

.bordure_droite {
        border-right: 3px solid #0066A0;
}

Modifié par Zinoviyky (11 Jun 2015 - 17:05)

Bonjour,

À l'arrache, un code additionnel aurait pu donner ceci :

.tab_consultation th:last-child {
  border-right: none;
}

Mais ce code n'est qu'une béquille. En effet, c'est le système des bordures dans son ensemble qui est à revoir : une classe telle que .bordure_droite ne devrait pas exister sur un ensemble html aussi simple. Bref, il vaut mieux tout reprendre à la base : CodePen

Merci de ta réponse.

Le souci, c'est que dans ton code, tu utilises border-collapse: collapse qui n'est pas compatible avec un border radius.
Pour remédier ce problème, j'utilise un border-spacing:0px mais c'est lui qui me créer cette bordure indésirable.

et si tu enleve simplement border-right: 3px solid #0066A0;
dans

.tab_consultation th {
    
        border-bottom: 3px solid #0066A0;
        text-align: left;
        padding-left: 20px;
        
    
}

Cela ne marche pas.
Merci de ta réponse

Il s'agit de la bordure pour la partie th qui me géne. Le souci c'est que si je la supprime ça me l’enlève bien ou il y a mon problème mais ça me l’enlève également pour la séparation entre mes deux cellules th, et celle ci j'aimerai la garder.

Explication en image :

Solution ici : http://openclassrooms.com/forum/sujet/suppression-de-bordure-tableau

Merci à vous.

Oui voila, c'était la deuxieme option, ajouter une class ou un un id à la bordure QUI DOIT comporter la bordure right.. et l'enlever à l'autre..

++

Zinoviyky a écrit :
Solution ici : http://openclassrooms.com/forum/sujet/suppression-de-bordure-tableau

J'ai pas trouvé la réponse dans le topic, hormis qu'il ne faille pas utliser <table> (on va pas troller...).

Mais j'avais aussi donné ceci, et ça fonctionne :

.tab_consultation th:last-child {
  border-right: none;
}

... comme on peut voir ici : CodePen

Et attention : dans le tableau il manque une balise <tbody>.