Forum : Enlever les bordures de cellules dans un tableau

Réponse acceptée

Hum plus propre :
HTML

<table>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

CSS

table thead tr th{ border:0 ou none; }
table tbody tr td{ border: 1px solid #ccc; }

Astor

Salut ;)
Tu peux essayer de mettre la bordure en blanche sur ton CSS

Babou

Auteur

Oui mais le problème c'est que je souhaite également mettre une image de fond dans mon en tête, du coup ça va se voir les bordures blanches.

Astor

bah tu peux mettre un background:transparent;

Babou

Auteur

Ca marche pas, ça me supprime l'image de fond!

Nazahel

Salut, essayes avec en mettant border: 0;

WinuX

ou encore :

border : none;

Hiero

Salut, en faite il faut que tu fasses des tableaux imbriqués.

En reprenant l'exemple de ton image tu aurais :

<table>// tableau "conteneur"
    <table> // tableau avec bordures et fond éventuel
            <td></td> // cellule sans bordures
            <td></td> // cellule sans bordures
    </table> // fin du menu
    <table> //tableau qui contiendra les cellules avec les différents post....
    </table>
</table>

Et donc ton premier tableau contient le tout, le second tableau contient la description des colonnes... et à ce tableau tu lui met une bordure, et par contre les cellules contenue dans ce tableau, tu ne leur met pas de bordures "border : none;", et le tableau suivant contient le reste...

Je sais pas si c'est clair...

WinuX

Houla vous vous compliquez la vie xD

Un seul tableau suffit :

<table cellspacing="0">
    <thead>
        <tr>
            <th></th>
            <th></th>           
        </tr>
    </thead>

    <tbody>
        <tr>
            <td></td>
            <td></td>           
        </tr>
        <tr>
            <td></td>
            <td></td>            
        </tr>
    </tbody>
</table>

Ensuite en css tu as le choix entre :

Soit tu met que des balises th et non td et

thead tr th:first-child{
border-right : none;
}
th{
border : 1px solid ta_couleur;
}
Soit tu met des balises th et td dans quel cas il suffit de mettre uniquement des bordures comme ceci :

thead tr{
border : 1px solid ta_couleur;
}
td{
border : 1px solid ta_couleur;
}

Quand bien même le :first-child n'est pas compatible, il suffit juste de mettre une class et de styliser en css.

Faudra ptete penser à préciser les dimensions.

Hiero

j'étais partis au plus simple...sans penser en-têtes contenu... cela dit, je pense qu'on à répondu à la question

WinuX

Oh oui, j'pense qu'avec toutes les possibilités sur ce topic, ya de quoi faire :P

Et dans un sens tu as raison, ta solution n'est pas plus compliqué bien au contraire.

Babou

Auteur

Merci les gens, c'est niquel :D
J'ai pris la façon de nahazael!

Enlever les bordures de cellules dans un tableau

12 réponses