La spaziatura dei bordi della tabella CSS all'interno solo

Question

Ho cercato di risolvere questo problema per mesi e Google non mi ha aiutato. Sto provando ad avere spaziatura tra i tag <td> e <th> in una tabella, ma quando lo faccio, fa spaziatura all'esterno. Pertanto, la tabella non è in linea con qualcos'altro. Quindi sembra che il tavolo abbia delle imbottiture.

Non riesco a trovare una soluzione.

Here è un esempio del problema

Answer 1

avuto lo stesso problema, la proprietà spaziatura confine aggiungeva spazio intorno al tavolo pure, ea mia conoscenza, non wasn ’ t comunque limitarla solo ‘ la all'interno ’, così ho usato bordi trasparenti invece:

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

imposta ‘ spaziatura dei bordi ’ come normale, tranne che non ’ s ‘ indesiderato ’ spaziatura nella parte superiore e sinistra del tavolo.

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

Seleziona la prima colonna.

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

seleziona gli elementi td della prima fila (supponendo che la parte superiore della tabella inizia con un elemento TR, cambiano di conseguenza per th).

Answer 2

Utilizzare margini negativi e un contenitore con riempimento positivo.

#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 */ 
} 

Basta fare in modo di avere il contenuto sostanziale di allungare il tavolo al 100% la larghezza, altrimenti sarà 20px troppo stretta.

Maggiori informazioni: svachon.com/blog/inside-only-css-table-border-spacing/

Answer 3

Simile a quello che ha detto Steven Vachon, margine negativo potrebbe essere la soluzione migliore.

In alternativa, è possibile utilizzare calc() per risolvere il problema.

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); 
} 

Basta aggiungere qualunque margine di decollare o la larghezza sarà troppo stretto (100% non è sufficientemente larga).

Answer 4

Ho trovato un modo per farlo con margini negativi e migliora la risposta di Steven in quanto ti consente di fare in modo che il tavolo occupi il 100% anche se non ha abbastanza contenuti. La soluzione è di rendere la larghezza della tabella 100% e utilizzare un margine negativo su un elemento di contenimento:

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

See it as a jsFiddle

Answer 5

ho ottimizzato la soluzione con bordo trasparente in modo che sia più obliquamente tagliare bordi interni.

1) lasciare tavolo riempire orizzontale e crollare i confini:

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

2) impostare tutti i bordi delle celle di tabella alla larghezza 0 e prevenire sfondo è disegnata sotto il confine.

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

3) Impostare lo spazio interno con il bordo trasparente ma non sulla prima riga e colonna.

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

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

ecco un jsbin

Answer 6

Ecco una soluzione semplice e pulita.

HTML

<div class="column-container"> 
    <div class="column-children-wrapper"> 
    <div class="column">One</div> 
    <div class="column">Two</div> 
    <div class="column">Three</div> 
    <div class="column">Four</div> 
    </div> 
</div> 

CSS

.column-container { 
    display: table; 
    overflow: hidden; 
} 

.column-children-wrapper { 
    border-spacing: 10px 0; 
    margin-left: -10px; 
    margin-right: -10px; 
    background-color: blue; 
} 

.column { 
    display: table-cell; 
    background-color: red; 
} 

https://jsfiddle.net/twttao/986t968c/