web-dev-qa-db-fra.com

Espacement des bordures des tables CSS uniquement à l'intérieur

J'essaie de résoudre ce problème depuis des mois et Google ne m'a pas aidé. J'essaie d'avoir un espacement entre <td> et <th> balises dans un tableau, mais quand je le fais, il fait un espacement à l'extérieur. Par conséquent, la table n'est en ligne avec rien d'autre. Il semble donc que la table ait un rembourrage.

Je n'arrive pas à trouver de solution.

Ici est un exemple du problème

csshtml-table
46
user1112081

A eu le même problème, la propriété d'espacement des bordures ajoutait également de l'espace autour de la table, et à ma connaissance, il n'y avait de toute façon pas à la limiter à "l'intérieur", j'ai donc utilisé des bordures transparentes à la place:

table td {
   border-left: 1em solid transparent;
   border-top: 1em solid transparent;
}

Cela définit "l'espacement des bordures" comme normal, sauf qu'il y a un espacement "indésirable" en haut et à gauche du tableau.

table td:first-child {
   border-left: 0;
}

Sélectionne la première colonne.

table tr:first-child td {
   border-top: 0;
}

Sélectionne les éléments td de la première ligne (en supposant que le haut du tableau commence par un élément tr, changez en conséquence pour th).

21
JumpStomp

J'ai trouvé un moyen de le faire avec des marges négatives et améliore la réponse de Steven en ce qu'il vous permet de faire en sorte que le tableau occupe 100% même s'il n'a pas assez de contenu. La solution est de rendre la largeur du tableau à 100% et d'utiliser une marge négative sur un élément conteneur:

#container {
    margin: 0 -10px;
}
table {
    border-collapse: separate;
    border-spacing: 10px;
}
td, th {
    background-color: #ccf;
    padding: 5px;
}

Voyez-le comme un jsFiddle

15
Marc Stober

J'ai optimisé la solution avec une bordure transparente pour qu'elle n'ait plus de bordures intérieures coupées obliquement.

1) laissez le tableau remplir horizontalement et réduire les bordures:

table {
  width: 100%;
  border-collapse: collapse;
}

2) Définissez toutes les bordures des cellules du tableau sur la largeur 0 et évitez que l'arrière-plan ne soit dessiné sous la bordure.

td {
  border: 0px solid transparent;
  background-clip: padding-box;
}

3) Définissez l'espace intérieur avec une bordure transparente mais pas sur la première ligne et la première colonne.

tr > td + td {
  border-left-width: 10px;
}

tr + tr > td {
  border-top-width: 10px;
}

voici un jsbin

12
TLindig

Semblable à ce que Steven Vachon a dit, une marge négative peut être votre meilleur pari.

Vous pouvez également utiliser calc() pour résoudre le problème.

CSS:

/* border-collapse and border-spacing are css equivalents to <table cellspacing="5"> */

.boxmp {
    width:100%;
    border-collapse:separate;
    border-spacing:5px 0;
}

/* border-spacing includes the left of the first cell and the right of the last cell
    negative margin the left/right and add those negative margins to the width
    ios6 requires -webkit-
    Android browser doesn't support calc()
    100.57% is the widest that I could get without a horizontal scrollbar at 1920px wide */

.boxdual {
    margin:0 -5px;
    width:100.57%;
    width:-webkit-calc(100% + 10px);
    width:calc(100% + 10px);
}

Ajoutez simplement la marge que vous enlevez ou la largeur sera trop étroite (100% n'est pas assez large).

9
doubleJ

Utilisez des marges négatives et un récipient avec un rembourrage positif.

#container {
    box-sizing: border-box; /* avoids exceeding 100% width */
    margin: 0 auto;
    max-width: 1024px;
    padding: 0 10px;    /* fits table overflow */
    width: 100%;
}

table {
    border-collapse: separate;
    border-spacing: 10px;
    margin: 0 -10px;    /* ejects outer border-spacing */
    min-width: 100%;    /* in case content is too short */
}

td {
    width: 25%;     /* keeps it even */
}

Assurez-vous simplement que vous disposez d'un contenu substantiel pour étirer la table à 100% de largeur, sinon ce sera 20px trop étroit.

Plus d'informations: svachon.com/blog/inside-only-css-table-border-spacing/

3
Steven Vachon

Voici le hack cool pour le faire

table {
    border-collapse: inherit;
    border-spacing: 10px;
    width: calc(100% + 20px);
    margin-left: -10px;
}

utilisez margin-left: -10px; pour supprimer le rembourrage gauche mais à droite il y aura un rembourrage 20px. Maintenant, pour le mettre à jour, utilisez width: calc(100% + 20px);

1
Abhishek Goel