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

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

Voici 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'obtiens 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 ?

Brian Tompsett - 汤莱恩
Question modifiée 7 novembre 2017 в 10:07
Programmation
html css html-table background-image
16 avril 2011 в 2:39
1 voir
Solution
<table cellspacing="0" cellpadding="0">

Et en css :

table {border: none;}

EDIT: Comme l'a noté iGEL, cette solution est officiellement dépréciée (mais elle fonctionne toujours), donc si vous partez de zéro, vous devriez opter pour la solution border-collapse de jnpcl's.

En fait, je n'aime pas trop ce changement jusqu'à présent (je ne travaille pas souvent avec des tableaux). Il rend certaines tâches un peu plus compliquées. Par exemple, lorsque vous voulez inclure deux bordures différentes au même endroit (visuellement), alors que l'une est en HAUT pour une ligne, et la seconde en BAS pour l'autre ligne. Elles vont s'effondrer (= une seule d'entre elles sera affichée). Vous devez ensuite étudier comment est calculée la "priorité" des bordures et quels sont les styles de bordures les plus forts (double ou 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 réduction des bordures, cela ne fonctionne pas car il y a toujours une bordure en moins. Je dois le faire d'une autre manière (il existe d'autres solutions, bien sûr). Une possibilité est d'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>​​​


.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;}​

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

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

Damb
Réponse modifiée 25 novembre 2012 в 9:31
Commentaires (2)
 
table {
    border-collapse: collapse;
}
Aruna Herath
Réponse modifiée 6 octobre 2018 в 3:46
Commentaires (0)

Pour ma part, j'avais besoin de faire quelque chose comme ceci pour supprimer complètement les bordures du tableau et de toutes les cellules. Cela ne nécessite aucune modification du code HTML, ce qui était utile dans mon cas.

table, tr, td {
    border: none;
}
Commentaires (1)