Espacio entre los bordes de la tabla CSS dentro de

Question

Intento resolver esto durante meses y Google no me ha ayudado. Estoy tratando de tener espacio entre las etiquetas <td> y <th> en una tabla, pero cuando lo hago, se hace un espacio en el exterior. Por lo tanto, la tabla no está en línea con nada más. Entonces parece que la mesa tiene algo de relleno.

Parece que no puedo encontrar una solución.

Here es un ejemplo de la edición

Answer 1

tenía el mismo problema, la propiedad espaciado de bordes añadía el espacio alrededor de la mesa, así, y que yo sepa, no wasn ’ t de todos modos para limitarlo sólo a ‘ la dentro ’, por lo que utiliza bordes transparentes en lugar:

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

Esto establece ‘ espaciado de bordes ’ como normal, excepto que no ’ s ‘ no deseado ’ espacios en la parte superior e izquierda de la mesa.

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

Selecciona la primera columna.

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

selecciona los elementos td de la primera fila (suponiendo que la parte superior de la tabla comienza con un elemento tr, cambian en consecuencia para TH).

Answer 2

Utilice márgenes negativos y un contenedor con relleno 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 */ 
} 

Sólo asegúrese de que usted tiene un contenido sustancial para que se estire la tabla a la anchura del 100%, o de lo contrario será demasiado estrecho 20 píxeles.

Más información: svachon.com/blog/inside-only-css-table-border-spacing/

Answer 3

Similar a lo que dijo Steven Vachon, margen negativo puede ser su mejor apuesta.

O bien, puede usar calc() para solucionar el 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); 
} 

Sólo tiene que añadir cualquier margen de despegar o la anchura será demasiado estrecha (100% no es suficiente ancho).

Answer 4

Encontré una manera de hacer esto con márgenes negativos y mejora la respuesta de Steven, ya que le permite hacer que la tabla ocupe el 100% incluso si no tiene suficiente contenido. La solución es hacer que el ancho de la tabla 100% y el uso de un margen negativo en un elemento que contiene:

#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

optimicé la solución con la frontera transparente por lo que ha cortado no más oblicuamente bordes internos.

1) deje llenar la mesa horizontal y el colapso de las fronteras:

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

2) Establecer todos los bordes de las celdas de la tabla a la anchura 0 y prevenir fondo se dibuja por debajo de la frontera.

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

3) Establezca el espacio interior con el borde transparente pero no en la primera fila y la columna.

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

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

aquí es un jsbin

Answer 6

Aquí es una solución simple y limpia.

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/