web-dev-qa-db-fra.com

Comment supprimer complètement les bordures d'un tableau HTML

Mon objectif est de créer une page HTML similaire à un "cadre photo". En d'autres termes, je veux faire une page vierge qui est entourée de 4 images.

Ceci est mon code:

<table>
    <tr>
        <td class="bTop" colspan="3">
        </td>
    </tr>
    <tr>
        <td class="bLeft">
        </td>
        <td class="middle">
        </td>
        <td class="bRight">
        </td>
    </tr>
    <tr>
        <td class="bBottom" colspan="3">
        </td>
    </tr>                                                    
</table>

Et les classes CSS sont les suivantes:

.bTop
{
    width: 960px;
    height: 111px;
    background-image: url('../Images/BackTop.jpg');
}
.bLeft
{
    width: 212px;
    height: 280px;
    background-image: url('../Images/BackLeft.jpg');    

}

.middle
{
    width: 536px;
    height: 280px;
}

.bRight
{
    width: 212px;
    height: 280px;
    background-image: url('../Images/BackRight.jpg');    
}

.bBottom
{        
    width: 960px;
    height: 111px;
    background-image: url('../Images/BackBottom.jpg');       
}

Mon problème est que j'ai de fines lignes blanches entre les cellules du tableau, je veux dire que la bordure des images n'est pas continue. Comment puis-je éviter ces espaces blancs?

htmlcsshtml-tablebackground-image
119
yazanpro
<table cellspacing="0" cellpadding="0">

Et en css:

table {border: none;}

EDIT: Comme l'a noté iGEL, cette solution est officiellement obsolète (fonctionne toujours), donc si vous partez de zéro, vous devriez utiliser la solution de jnpcl pour réduire la bordure.

En fait, je n’aime pas beaucoup ce changement jusqu’à présent (ne travaillez pas souvent avec des tables). Cela rend certaines tâches un peu plus compliquées. Par exemple. lorsque vous souhaitez inclure (visuellement) deux bordures différentes au même endroit, l'une étant TOP pour une ligne, et l'autre étant BOTTOM pour l'autre ligne. Ils vont s'effondrer (= un seul d'entre eux sera montré). Ensuite, vous devez étudier comment la "priorité" de la frontière est calculée et quels styles de bordure sont "plus forts" (double vs solide, etc.).

J'ai fait comme ça:

<table cellspacing="0" cellpadding="0">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>

----------

.first {border-bottom:1px solid #EEE;}
.second {border-top:1px solid #CCC;}

Maintenant, avec la fermeture de la bordure, cela ne fonctionnera pas car il y a toujours une bordure supprimée. Je dois le faire d'une autre manière (il y a plus de solutions ofc). Une possibilité consiste à utiliser CSS3 avec box-shadow:

<table class="tab">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>​​​

<style>
.tab {border-collapse:collapse;}
.tab .first {border-bottom:1px solid #EEE;}
.tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}​
</style>

Vous pouvez également utiliser quelque chose comme le style de bordure "groove | ridge | inset | outset" avec une seule bordure. Mais pour moi, ce n'est pas optimal car je ne peux pas contrôler les deux couleurs.

Il existe peut-être une solution simple et agréable pour supprimer les frontières, mais je ne l'ai pas encore vue et, honnêtement, je n'y ai pas passé beaucoup de temps. Peut-être que quelqu'un ici pourra me montrer/nous;)

155
Damb
table {
    border-collapse: collapse;
}
82
drudge

Pour moi, je devais faire quelque chose comme ceci pour supprimer complètement les bordures de la table et toutes les cellules. Cela ne nécessite aucune modification du code HTML, ce qui a été utile dans mon cas.

table, tr, td {
    border: none;
}
12
sean.boyer

Dans un environnement bootstrap, aucune des principales réponses n'a aidé, mais l'application de ce qui suit a supprimé toutes les bordures:

.noBorder {
    border:none !important;
}

Appliqué comme:

<td class="noBorder">
10
Stephan

Dans un environnement bootstrap, voici ma solution:

    <table style="border-collapse: collapse; border: none;">
        <tr style="border: none;">
            <td style="border: none;">
            </td>
        </tr>
    </table>
6
KLMN

C'est ce qui a résolu le problème pour moi:

Dans votre balise HTML tr, ajoutez ceci:

style="border-collapse: collapse; border: none;"

Cela a supprimé toutes les bordures affichées sur la ligne du tableau.

3
Khozanai