Comment supprimer complètement les bordures du tableau HTML
Mon objectif est de créer une page HTML similaire à un "cadre photo". En d'autres termes, je veux faire une page blanche entourée de 4 images.
C'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 je reçois de fines lignes blanches entre les cellules de la table, je veux dire que la bordure des images n'est pas continue. Comment puis-je éviter ces espaces?
6 réponses
<table cellspacing="0" cellpadding="0">
Et en css:
table {border: none;}
Modifier: Comme iGEL l'a noté, Cette solution est officiellement obsolète (fonctionne toujours), donc si vous partez de zéro, vous devriez utiliser la solution border-collapse de jnpcl.
En fait, je n'aime pas ce changement jusqu'à présent (ne fonctionne pas avec des tables aussi souvent). Cela 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 supérieure pour une ligne, et la seconde étant BAS pour les autres lignes. Ils vont s'effondrer (= un seul d'entre eux sera affiché). Ensuite, vous devez étudier comment la "priorité" de la frontière est-elle calculée et quels styles de bordure sont "plus forts "(double vs solide, etc.).
J'ai fait comme ceci:
<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 l'effondrement 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é 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>
<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 "groove|ridge||dilater le" style de bordure, avec une seule frontière. Mais pour moi, ce n'est pas optimal, car je ne peux pas contrôler les deux couleurs.
Peut-être qu'il y a une solution simple et agréable pour l'effondrement des frontières, mais je ne l'ai pas encore vu et honnêtement, je n'ai pas passé beaucoup de temps dessus. Peut-être que quelqu'un ici sera en mesure de me montrer /NOUS;)
Dans un environnement bootstrap, aucune des meilleures réponses n'a aidé, mais l'application de ce qui suit a supprimé toutes les frontières:
.noBorder {
border:none !important;
}
Appliqué comme:
<td class="noBorder">
Pour moi, j'avais besoin de faire quelque chose comme ça pour supprimer complètement les bordures de la table et de toutes les cellules. Cela ne nécessite pas du tout de modifier le code HTML, ce qui a été utile dans mon cas.
table, tr, td {
border: none;
}
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>
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;"
Qui a supprimé toutes les bordures qui apparaissaient sur la ligne de la table.